webpack是否使ES6模块与ES5浏览器兼容? [英] Does webpack make ES6 modules compatible with ES5 browsers?

问题描述

如果我在JS文件中使用 ES6导入:

If I use an ES6 import in a JS file like:

import { tempates } from "./templates.js";

webpack会将转换为类似以下内容:

webpack converts this to something like:

__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _templates_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./templates.js */ "./static/js/templates.js");

---

这是否意味着我可以使用ES6模块和由于webpack的转换，它们将在不能使用的旧浏览器中运行支持ES6模块吗?

---

Does this mean that I can use ES6 modules and due to the transformation of webpack they will also work in old browsers that do not support ES6 modules?

如果是:此转换Webpack 和一个 babel 之间的区别是什么? babel的转换描述于这里: https://babeljs.io/docs/plugins/transform-es2015-modules -commonjs/

If yes: Whats the difference between this transformation webpack does and that one babel does? The transformation of babel is described e.g. here: https://babeljs.io/docs/plugins/transform-es2015-modules-commonjs/

在较旧的浏览器中，与 ES6模块兼容性相关的使用babel或webpack的优势/劣势是什么?

What are the advantages/disadvantages using babel or webpack concerning ES6 module compatibilty in older browsers?

我正在使用webpack版本4.10.2，这是我的webpack配置:

I'm using webpack version 4.10.2 and this is my webpack config:

var path = require('path');

module.exports = {
    mode: 'development',
    entry: './static/js/mainScript.js',
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: 'asterics-grid.bundle.js'
    }
};

推荐答案

这是否意味着我可以使用ES6模块，并且由于webpack的转换，它们也可以在不支持ES6模块的旧浏览器中使用?

Does this mean that I can use ES6 modules and due to the transformation of webpack they will also work in old browsers that do not support ES6 modules?

这是Webpack的目的之一.

This is one of the purposes of Webpack.

此转换webpack和一个babel之间有什么区别?

Whats the difference between this transformation webpack does and that one babel does?

Webpack是捆绑器. Babel是翻译者.它们应该一起使用. Babel transform-es2015-modules-commonjs转换将ES模块转换为CommonJS模块. Node.js支持CommonJS模块，但浏览器不支持.

Webpack is a bundler. Babel is a transpiler. They are supposed to be used together. Babel transform-es2015-modules-commonjs transformation transforms ES modules into CommonJS modules. CommonJS modules are supported in Node.js but not in browsers.

使用babel或webpack在较旧的浏览器中具有ES6模块兼容性的优点/缺点是什么?

What are the advantages/disadvantages using babel or webpack concerning ES6 module compatibilty in older browsers?

优点是您可以在较旧的浏览器中使用ES模块.缺点是Webpack可能会引入限制，例如如何处理循环依赖项.

The advantage is that you can use ES modules in older browsers. The disadvantage is that Webpack may introduce limitations like how circular dependencies can be handled.

这篇关于webpack是否使ES6模块与ES5浏览器兼容?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！