Do es6 modules negate the need for browserify/webpack?

问题

ES6 modules allow us to create modules of code that can be exported and imported as dependencies.

Browserify and Webpack do the same thing. So am I right in assuming that if I use ES6 along with something like babel to transpile my code then webpack and browserify are not needed?

回答1:

If you use it in the browser, you currently still need webpack or browserify.

Let's have a look at an example:

The following

import * as name from 'name.js';

is turned into:

'use strict';

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj['default'] = obj; return newObj; } }

var _nameJs = require('name.js'); // Here, a function named "require" is still needed

var name = _interopRequireWildcard(_nameJs);

Check it out in the Babel Repl

As you see, babel relies on the CommonJS Method require (really any implementation of it) to do the import. As node.js implements CommonJS, it would work, but no browser currently implements it. AFAIK there aren't any browsers that support ES 6 Modules natively either.

回答2:

As elaborated here - ES6 modules have two aspects:

The ES6 module standard has two parts:

• Declarative syntax (for importing and exporting)
• Programmatic loader API: to configure how modules are loaded and to conditionally load modules

Babel handles only the first aspect - ie. declarative syntax for importing and exporting and does not provide its own loader.

What people using ES6 modules today do, is usually one of the following:

• Use Babel to transpile ES6 modules syntax to an existing module implementation like CommonJS/AMD and appropriately an available tool like Webpack/browserify/requirejs can be used to then load/bundle the js assets.
• Alternatively there are loaders like SystemJS which provide support for Programmatic loader API (through ES6 module loader polyfill. Using this tool does allow you get rid of Browserify/Webpack but, as of now, you are just swapping one tool for another. It is likely that as more and more libraries like Aurelia embrace ES6 modules, and recommend the standardized System.import syntax - SystemJS will soar in popularity.

Another aspect is compatibility with existing ecosystem of modules (especially on npm). It is noteworthy that you are not losing compatibility with existing ecosystem with either of the strategies: Both webpack and SystemJS allow loading and bundling of commonjs as well as AMD modules.

As far as bundling of assets is concerned, persistent connection support in HTTP 2 has already signficantly reduced the value of concatenation of javascript files. Though dead-code elimination after uglification of a full javascript bundle still remains a valuable optimization.

As authors of tools like Rollup have repeatedly pointed out, statically analysable nature of ES6 modules makes tree-shaking and dead code elimination much more effective.

来源：https://stackoverflow.com/questions/33276058/do-es6-modules-negate-the-need-for-browserify-webpack