将现有的 AMD 模块导入 ES6 模块 [英] Import existing AMD module into ES6 module
问题描述
我有一个现有的应用程序，其中使用 RequireJS 定义了 AMD 模块.我在我的项目中广泛使用文本"和i18n"插件作为 requirejs.我最近一直在试验 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:
define(function () {
return {
"foo": "the value of the foo field on module foo."
};
});
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屋！
