お願いします!System.jsとbabelをブラウザに統合するにはどうすればよいですか?
ブラウザでSystem.jsとbabelをどのように組み合わせることができますか?
開発モードでは、純粋なes6ソースコードをブラウザーで使用して、運用モードのときにファイルをバンドルする必要があります。だから私は以下のようにsystem.jsとbabelを設定する。
最新版systemjs
(0.19.24)とbabel-standalone
(6.6.5)の両方をnpmでインストールしました。
私のindex.htmlは
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>System.js demo</title>
</head>
<body>
<script src="./node_modules/systemjs/dist/system.src.js"></script>
<script>
System.config({
baseURL: './',
// or 'traceur' or 'typescript'
transpiler: 'Babel',
// or traceurOptions or typescriptOptions
babelOptions: {
presets: ['es2015']
},
map: {
Babel: './node_modules/babel-standalone/babel.js'
}
});
System.import('boot.js');
</script>
</body>
</html>
を下回っていると私のboot.jsは
import { app } from './app.js'
app.run();
を下回っていると私のapp.jsは
export app = {
run: function(){
console.log('app')
alert('app')
}
}
を下回っていると私は訪問するときページ、コンソールにエラーがあります。
system.src.js:57 Uncaught (in promise) Error: ReferenceError: [BABEL] http://v:3000/boot.js : Using removed Babel 5 option: base.modules - Use the corresponding module transform plugin in the
plugins
option. Check out http://babeljs.io/docs/plugins/#modules (…)
は、その後、私はバベルのドキュメントをチェックして、この
System.config({
baseURL: './',
// or 'traceur' or 'typescript'
transpiler: 'Babel',
// or traceurOptions or typescriptOptions
babelOptions: {
plugins: ["transform-es2015-modules-systemjs"],
presets: ['es2015']
},
map: {
Babel: './node_modules/babel-standalone/babel.js'
}
});
System.import('boot.js');
しかし、同じエラーが発生ように私のSystem.jsコンフィグ今、babelOptionsに1つのオプションを追加します。私はどのようにes6ソースコードモジュールをロードするためにブラウザでSystem.jsとbabelを混在させるのか分かりません。
誰でもお手伝いできますか?どうもありがとう!!
EDIT
私はsystem.src.jsをチェックし、babelTranspile機能でoptions.modules = 'system';
を削除しました。上記のエラーは消えました。新しいエラーが発生しました。
私はbabelOptionsでplugins: ["transform-es2015-modules-systemjs"]
が含まれていなかった場合は、JSファイルは
(function(System, SystemJS) {(function(__moduleName){'use strict';
var _app = require('./app.js');
_app.app.run();
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImJvb3QuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7OztBQUVBLFNBQUksR0FBSiIsImZpbGUiOiJib290LmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgYXBwIH0gZnJvbSAnLi9hcHAuanMnXG5cbmFwcC5ydW4oKTtcbiJdfQ==
})("http://v:3000/boot.js");
})(System, System);
以下に変換しかし、私は、私はbabelOptionsでplugins: ["transform-es2015-modules-systemjs"]
が含まれている場合、そのファイルはありませんエラーに
require is not a function.
を持っています変換され、app.jsにエラーがスローされます
system.src.js:57 Uncaught (in promise) Error: SyntaxError: Unexpected token export
これを解決する方法を教えてください。返事をまつ。ありがとうございました