ES6 模块导入和依赖管理

ES6 module import and dependency management

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

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

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

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 项目并开始一个新项目 bar 使用 foo 这将是我的目录结构。

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

但这行不通，因为从 foo 到 lodash 的路径现在已断开（如果我正确理解 Browserify，则点斜杠在 './blaat/file.js' 中是相对于从中调用它的文件）。

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

有没有什么方法可以指示多个源根？（即在上述情况下 src/js 和 src/vendor ... 好吧，理想情况下你只想声明 import * as _ from 'lodash';）

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

我认为jspm is the solution your looking for. It will help you out without making file path assumptions when importing modules. It uses the SystemJS dynamic ES6 loader. Watch the video that is posted on their site for a very good explanation on how it all works, Guy Bedford: Package Management for ES6 Modules [JSConf2014]。

ES6 模块导入和依赖管理

ES6 module import and dependency management

javascript

module

dependency-management

ecmascript-6