如何使用 ECMAScript 6 模块进行前端开发？

Question

我想在前端项目中使用 ECMAScript 6 模块系统，这样代码的相互依赖性比简单地预先加载 "all that might be needed" 更清晰，在 HTML .

但是，在 JavaScript 主文件中包含以下行不起作用：

import fuzLogin from 'fuzLogin'

浏览器控制台的错误是：can't find variable: require

编译后的代码（由 Babel 创建）为：

var _fuzLogin = require("fuzLogin");

var _fuzLogin2 = _interopRequireDefault(_fuzLogin);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

对于编译后的代码，ECMAScript 6 模块系统是否应该与 WebStorm 10 一起工作？

我是否应该在我的 HTML 中添加一些外部依赖项以提供缺少的 require？

还有其他方法可以实现我 JavaScript 端的模块化前端编排吗？

Answer 1

我认为您的 babel 配置设置为使用 commonjs 与 require (requirejs) 一起转译...因此，为了使用该配置，您需要包括要求：http://requirejs.org/

Answer 2

我找到了两种方式来满足我的需求，但方式略有不同：

jspm
Rollup

JSPM 允许动态加载 ES2015 模块，以便在浏览器中进行转译。这真的很棒，而且是我没想到的。

此外，JSPM 还提供传统的构建工具来进行生产捆绑。

但我实际上选择了 Rollup。

Rollup集合了各种构建系统，基于ES2015封装，提供我想要的。对我来说最重要的是 Jason Lengstorf（顺便说一句，只有 1 和 2 周大）的精彩博客文章，其中介绍了整个实际设置。

参考文献：

jspm-trial (GitHub) 我做的回购，试验这些东西
Smaller, More Efficient JavaScript Bundling Using Rollup（博客，2016 年 8 月）

如何使用 ECMAScript 6 模块进行前端开发？

How can I use ECMAScript 6 modules for front-end development?

webstorm

ecmascript-6

babeljs

参考文献：