私はAMDモジュールを定義した既存のアプリケーションをRequireJSに持っています。私はプロジェクトでrequirejsのために "text"と "i18n"プラグインを広範囲に使用しています。 私は最近、ES6モジュールを実験していて、アプリケーションで新しいモジュールを作成する際にES6モジュールを使用したいと考えています。しかし、私は既存のAMDモジュールを再利用し、ES6モジュールを定義しながらそれらをインポートしたいと考えています。既存のAMDモジュールをES6モジュールにインポート
これも可能ですか？ TraceurとBabelはES6モジュールからAMDモジュールを作成できますが、既存のAMDモジュールに依存しない新しいモジュールでのみ動作しますが、既存のAMDモジュールの再利用の例は見つかりませんでした。
ご協力いただければ幸いです。これは私にとっては今、すべてのES6グッズを使い始めるためのブロッカーです。
おかげ
はい、それは行うことができます。次の構造を持つ新しいアプリケーションを作成します。
gulpfile.js
index.html
js/foo.js
js/main.es6
node_modules
はgulpとgulp-babelをインストールします。 （私は、ローカルgulpをインストールすることを好むが、あなたは世界的にそれをしたいことがあります。それはあなた次第です。）
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);
ブラウザでファイルbuild/index.htmlを開いて、アプリケーションを構築するためにgulpを実行した後。あなたは、コンソールに表示されます：
in main: the value of the foo field on module foo.
ES6モジュールmainは、AMDモジュールfooをロードし、エクスポートされた値を使用することができました。また、ネイティブAMDモジュールにAMDに変換されたES6モジュールをロードさせることも可能です。バベルが仕事を終えた後は、AMDローダーに関するすべてのAMDモジュールです。
お返事ありがとうございました。これは通常のAMDモジュールで有効です。しかし、私は 'require（['text！myTemplate.tpl']、function（MyTemplate）{}）のようなフォーマットを持ついくつかのRequireJSプラグインを使用していました;'このフォーマットはどのようにES2015で動作しますか？ – coderC
@ Louisの答えに加えて、require.jsの設定で指定されているサードパーティのライブラリがすでにあると仮定し、新しいES6モジュールでは、モジュールをインポートするたびにamdまたはes6になりますインポートされたモジュール名を一貫して保持していれば問題ありません。例：ここでは
はgulpfileは次のとおりです。ここで
gulp.task("es6", function() {
return gulp.src("modules/newFolder//es6/*.js")
.pipe(babel({
"presets": ["es2015"],
"plugins": ["transform-es2015-modules-amd"]
// don't forget to install this plugin
}))
.pipe(gulp.dest("modules/newFolder/build"));
});
はES6ファイルです：
import d3 from 'd3';
import myFunc from 'modules/newFolder/es6module'
// ...
これは、このようSTHにコンパイルされます。
define(['d3', 'modules/newFolder/es6module'], function (_d, _myFunc) {
'use strict';
// ...
});
限りコンパイルされたファイルのdefine(['d3', 'modules/newFolder/es6module'], ...のモジュールが元のAMDファイルで問題ないので、最初は、私は、AMDモジュールでi18n!nls/langを使用していたrequire.jsローダーについて@ coderCの質問の点でなど
NG require.js設定、などの圧縮ファイルには、私はそれを見つけるには本当に難しいものになるだろうと思いましたES6モジュールのAMDプラグインローダーの代わりに、i18nextなどの他のローカリゼーションツールに切り替えました。しかし、それはこれを行うには大丈夫だということが判明した：
import lang from 'i18n!nls/lang';
// import other modules..
それのようSTHするゴクゴクタスクによってコンパイルされますので：
define(['d3', 'i18n!nls/lang'], function (_d, _lang) {
// ....
この道を、私たちが必要と心配する必要はありません.jsローダー。
簡単に言えば、ES6モジュールでは、既存のAMDプラグイン/モジュールを使用する場合は、コンパイル済みファイルが既存のセットアップに準拠していることを確認するだけです。また、ES6モジュールバンドラRollupを試して、新しいES6ファイルをすべてバンドルすることもできます。
これは、プロジェクトでES6の構文を統合しようとしている人にとって役に立ちます。
"既存のAMDモジュールに依存しない新しいモジュールでのみ動作*" - なぜそう思うのですか？もしあなたがAMDにコンパイルし、requirejsを使ってモジュールをロードするなら、あなたはまだ普通の（コンパイルされていない）モジュールを必要とすることがあります。 – Bergi
はい、@ Bergiさんのように、ES2015モジュールをAMD以外のものにコンパイルする予定ですか？ – JMM
私はES2015モジュールをAMDのみにコンパイルしたいと考えています。しかし、私が言及したように、ES2015モジュールにインポートしたいAMDモジュールがいくつかありますので、再度書き直すのではなく、それらを再利用することができます。 – coderC