将现有的AMD模块导入ES6模块 [英] Import existing AMD module into ES6 module
问题描述
我有一个现有的应用程序，我使用 RequireJS 定义了AMD模块。我在项目中广泛使用text和i18n插件。
我最近一直在尝试使用ES6模块，并希望在我的应用程序中创建新模块时使用它们。但是，我想重新使用现有的AMD模块，并在定义我的ES6模块时导入它们。
I have an existing application where I have AMD modules defined using RequireJS. I use "text" and "i18n" plugins for requirejs extensively in my project. I have been experimenting with ES6 modules lately and would like to use them while creating new modules in my application. However, I want to reuse the existing AMD modules and import them while defining my ES6 modules.
这是否可以？我知道Traceur和Babel可以从ES6模块创建AMD模块，但只适用于不依赖现有AMD模块的新模块，但是我找不到重用现有AMD模块的示例。
Is this even possible? I know Traceur and Babel can create AMD modules from ES6 modules, but that only works for new modules with no dependency on existing AMD modules, but I could not find an example of reusing the existing AMD modules.
任何帮助将不胜感激。这是一个阻止我现在开始使用所有ES6的好东西。
Any help will be appreciated. This is a blocker for me right now to start using all ES6 goodies.
谢谢
推荐答案
是的，可以做到。创建一个新的应用程序，具有以下结构：
Yes, it can be done. Create a new application with the following structure:
gulpfile.js
index.html
js/foo.js
js/main.es6
node_modules
安装 gulp 和 gulp-babel 。 （我更喜欢在本地安装 gulp ，但您可能希望在全球范围内：这取决于您。）
Install gulp and gulp-babel. (I prefer to install gulp locally but you may want it globally: that's up to you.)
index.html ：
<!DOCTYPE html>
<html>
<head>
<title>Something</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.20/require.js"></script>
<script>
require.config({
baseUrl: "js",
deps: ["main"]
});
</script>
</head>
<body>
</body>
</html>
gulpfile.js ：
"use strict";
var gulp = require('gulp');
var babel = require('gulp-babel');
gulp.task("copy", function () {
return gulp.src(["./js/**/*.js", "./index.html"], { base: '.' })
.pipe(gulp.dest("build"));
});
gulp.task("compile-es6", function () {
return gulp.src("js/**/*.es6")
.pipe(babel({"modules": "amd"}))
.pipe(gulp.dest("build/js"));
});
gulp.task("default", ["copy", "compile-es6"]);
js / foo.js p>
js/foo.js:
define(function () {
return {
"foo": "the value of the foo field on module foo."
};
});
js / main.es6 p>
js/main.es6:
import foo from "foo";
console.log("in main: ", foo.foo);
运行 gulp 来构建应用程序，在浏览器中打开文件 build / index.html 。您将在控制台上看到：
After you've run gulp to build the application, open the file build/index.html in your browser. You'll see on the console:
in main: the value of the foo field on module foo.
ES6模块 main 能够加载AMD模块 foo 并使用导出的值。也可能有一个本机AMD模块加载已经转换为AMD的ES6模块。一旦Babel完成了工作，就像AMD装载机一样，它们都是AMD模块。
The ES6 module main was able to load the AMD module foo and use the exported value. It would also be possible to have a native-AMD module load an ES6 module that has been converted to AMD. Once Babel has done its work, they are all AMD modules as far as an AMD loader is concerned.
这篇关于将现有的AMD模块导入ES6模块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
