【问题标题】:ES6 module import and dependency managementES6 模块导入和依赖管理
【发布时间】:2015-03-01 20:36:45
【问题描述】:

使用转译器已经可以使用 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

但这不起作用,因为从 foolodash 的路径现在已损坏(如果我正确理解 Browserify 的话,'./blaat/file. js' 是相对于调用它的文件而言的)。

是否有某种不做任何文件路径假设的导入方式?

是否有某种方法可以指示多个源根? (即在上述情况下 src/js 和 src/vendor ...好吧,理想情况下你只想声明import * as _ from 'lodash';

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

【问题讨论】:

    标签: javascript module dependency-management ecmascript-6


    【解决方案1】:

    我认为jspm 是您正在寻找的解决方案。在导入模块时,它会帮助你而不用做文件路径假设。它使用SystemJS dynamic ES6 loader。观看发布在他们网站上的视频,以很好地解释它是如何工作的,Guy Bedford: Package Management for ES6 Modules [JSConf2014]

    【讨论】: