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

我认为您的babel配置设置为使用commonjs（{1}}（requirejs）进行转换...因此，为了使用该配置，您需要包含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模块进行前端开发？

2 个答案:

参考文献：