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

Question

我希望在前端项目中使用ECMAScript 6模块系统，这样代码的相互依赖性就比在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

我发现了两种实现我想要的东西的方法，以稍微不同的方式：

• jspm
• 卷起

JSPM允许动态加载ES2015模块，以便在浏览器中进行转换.这真是太棒了，真的，还有一些我没想到的事。

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

但实际上我选择了使用卷车。

Rollup将各种构建系统聚集在一起，并且基于ES2015打包，提供我所追求的。对我来说最重要的是(仅一周和两周大)的精彩博客文章，这些文章贯穿了整个实际的设置。

参考文献：

• 我做了jspm-审判 (GitHub)回购，做了这些实验
• 更小，更有效的JavaScript捆绑使用卷 (博客，2016年8月)

Answer 2

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