如何在ECMAScript 6中使用模块？

Question

I try use this code for example, and compile this code with Babel

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

after compile:

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;

but browser show error: " Uncaught ReferenceError: exports is not defined ". What i do wrong? Maybe i need use some libs (if yes, how do it)?

Answer 1

Babel will convert ES6 module syntax into other module formats. The default one is CommonJS. Node supports CommonJS by default. If you wish to use CommonJS modules in a browser, you'll need to use Babel along side a module bundler like Webpack or Browserify. You'd use something along the lines of:

npm install browserify babelify

and bundle with

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

then load bundledFile.js in your browser.