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
$ b

和 foo.js 首先声明：



$ p code $ import $ as $ from $ ../../ vendor / lodash / dist / lodash.min.js';

或（作为浏览器想要从Babelify转到CommonJS）：

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

如果我现在整理并发布我的 foo 项目，并开始使用 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 ...好的，理想情况下，您只想从lodash; ）将 import *指定为_ / p>



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

解决方案

我认为 jspm 是您寻找的解决方案。在导入模块时，它不会导致文件路径假设。它使用 SystemJS动态ES6加载程序。观看他们网站上发布的视频，了解如何运作的一个很好的解释， Guy Bedford：ES6模块的软件包管理[ JSConf2014] 。

With the use of transpilers it is already possible to use ES6 modules. One of the easiest ways is using Browserify and Babelify. The problem I'm having is how to handle dependency management.

In the old days you'd just have some Bower dependencies. The build would bundle non-CDN to vendor.js and project specific files to foobar.js (or whatever). So then you'd be able to use the resulting code in a different project by simply bower install foobar --save. If both foobar and your new project had a common dependency it would be easily resolved with Bowers flat dependency.

Now in come ES6 modules: Say I have a project foo using lodash. The directory structure is as follows:

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

And foo.js starts by declaring:

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

or (as Browserify wants since Babelify transpiles to CommonJS):

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

If I now round up and publish my foo project and start a new project bar that uses foo this will be my directory structure.

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

But that would not work since the path from foo to lodash is now broken (if I understand Browserify correctly the dot-slash in './blaat/file.js' is relative to the file it's being called from).

Is some way to import without making any file path assumptions?

Isn't there some way to indicate multiple source roots? (ie in the above case src/js and src/vendor ... well, ideally you'd just want to state import * as _ from 'lodash';)

I've only used Browserify with Babelify on cli. Should I be using some other transpiler?

解决方案

I think that 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模块导入和依赖管理的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！