javascript - ES6 模块导入和依赖管理

Question

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

在过去，您只需要一些 Bower 依赖项。该构建会将非 CDN 捆绑到 vendor.js 并将特定文件投影到 foobar.js(或其他)。因此，您只需 bower install foobar --save 就可以在不同的项目中使用生成的代码。如果 foobar 和您的新项目具有共同的依赖关系，则可以使用 Bowers 平面依赖关系轻松解决。

现在 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';

或者(正如 Browserify 所希望的那样，因为 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，则 './blaat/file.html 中的点斜线)。 js' 相对于调用它的文件)。

有没有不做任何文件路径假设的导入方式？

有没有办法表明多个源根？ (即在上述情况下 src/js 和 src/vendor ...好吧，理想情况下你只想声明 import * as _ from 'lodash';)

我只在 cli 上使用 Browserify 和 Babelify。我应该使用其他转译器吗？

Answer 1

我认为 jspm是您正在寻找的解决方案。它将帮助您在导入模块时无需进行文件路径假设。它使用 SystemJS dynamic ES6 loader .观看发布在他们网站上的视频，以获得关于其工作原理的很好解释，Guy Bedford: Package Management for ES6 Modules [JSConf2014] .