ES6模块导入和依赖关系管理

ES6 module import and dependency management

本文关键字:关系 管理 依赖 模块 导入 ES6      更新时间:2023-09-26

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

在过去,你只会有一些鲍尔的依赖。该构建将非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。我应该使用其他的运输车吗?

我认为jspm是您想要的解决方案。它将帮助您在导入模块时不做文件路径假设。它使用SystemJS动态ES6加载程序。观看他们网站上发布的视频,了解这一切是如何运作的,Guy Bedford:ES6模块的包管理[JSConf2014]。