webpack 是否使 ES6 模块兼容 ES5 浏览器?

2024-04-10

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

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

webpack 转换这类似于:

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

这是否意味着我可以使用 ES6 模块 and 由于webpack的改造他们会也适用于旧浏览器不支持ES6模块?

如果是:那是什么之间的区别 this 转换网页包是的,那个babel做? babel 的转换被描述为这里:https://babeljs.io/docs/plugins/transform-es2015-modules-commonjs/ https://babeljs.io/docs/plugins/transform-es2015-modules-commonjs/

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


我使用的是 webpack 版本 4.10.2,这是我的 webpack 配置:

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 模块的旧浏览器中工作?

这就是Webpack的目的之一。

webpack 所做的这种转换与 babel 所做的转换有什么区别?

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

在旧版浏览器中使用 babel 或 webpack 对于 ES6 模块兼容性有哪些优点/缺点?

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

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

webpack 是否使 ES6 模块兼容 ES5 浏览器? 的相关文章