ES6模块导入和依赖管理

Question

使用转换器已经可以使用ES6模块。最简单的方法之一是使用Browserify和Babelify。 我遇到的问题是如何处理依赖管理。

在过去，你只有一些Bower依赖项。构建会将非CDN捆绑到 vendor.js ，并将特定文件投影到 foobar.js （或其他）。 那么您就可以通过bower install foobar --save在不同的项目中使用生成的代码。 如果 foobar 和你的新项目都有一个共同的依赖关系，那么很容易通过Bowers flat依赖来解决它。

现在进入ES6模块： 假设我使用 lodash 有一个项目 foo 。目录结构如下：

src/js/foo.js src/vendor/lodash/dist/lodash.min.js

foo.js 首先声明：

import * as _ from '../../vendor/lodash/dist/lodash.min.js';

或（因为Babify化，因为Babelify需要转换为CommonJS）：

import * as _ from './../../vendor/lodash/dist/lodash.min.js';

如果我现在整理并发布我的 foo 项目并启动一个使用 foo 的新项目 bar ，这将是我的目录结构。

src/js/bar.js src/vendor/foo/dist/foo.js src/vendor/lodash/dist/lodash.min.js

但是这不起作用，因为从 foo 到 lodash 的路径现在被破坏了（如果我正确理解了Browserify中的点斜线＆＃39; ./ blaat /file.js'相对于从中调用的文件。

是否可以在不进行任何文件路径假设的情况下导入？

有没有办法表明多个源根？ （即在上面的例子中src / js和src / vendor ......好吧，理想情况下你只想说明import * as _ from 'lodash';）

我在cli上只使用了Browserify with Babelify。我应该使用其他一些转换器吗？

Answer 1

我认为jspm是您寻找的解决方案。在导入模块时，它将帮助您而不进行文件路径假设。它使用SystemJS dynamic ES6 loader。观看在其网站上发布的视频，以便对其工作原理进行非常好的解释，Guy Bedford: Package Management for ES6 Modules [JSConf2014]。