如何在ECMAScript 6中使用模塊？

Question

我嘗試使用例如這個代碼，編譯後巴貝爾

let notExported = 'abc'; 
export function square(x) { 
    return x * x; 
} 
export const MY_CONSTANT = 123; 

編譯此代碼：

Object.defineProperty(exports, '__esModule', { value: true }); 
exports.square = square; 
var notExported = 'abc'; 
function square(x) { 
    return x * x; 
} 
var MY_CONSTANT = exports.MY_CONSTANT = 123; 

但瀏覽器顯示錯誤：「未捕獲的ReferenceError：出口沒有定義」。我做錯了什麼？也許我需要使用一些庫（如果是的話，它是如何做到的）？

Answer 1

Babel會將ES6模塊語法轉換爲其他模塊格式。默認的一個是CommonJS。 Node默認支持CommonJS。如果您希望在瀏覽器中使用CommonJS模塊，則需要使用Babel以及Webpack或Browserify等模塊打包程序。你會用線沿線的東西：

npm install browserify babelify 

和捆綁與

./node_modules/.bin/browserify -t babelify yourFile.js -o bundledFile.js 

然後加載bundledFile.js在瀏覽器中。