3

助けてください！

ブラウザでSystem.jsとbabelを統合するにはどうすればよいですか?

開発モードではブラウザで純粋な es6 ソース コードを使用し、プロダクション モードではファイルをバンドルしたいと考えています。そこで、以下のように system.js と babel を設定します。

npm経由で最新バージョンsystemjs（0.19.24）とbabel-standalone（6.6.5）の両方をインストールしました。

私の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) エラー: ReferenceError: [BABEL] http://v:3000/boot.js : 削除された Babel 5 オプションの使用: base.modules - オプションで対応するモジュール変換プラグインを使用しpluginsます. http://babeljs.io/docs/plugins/#modules (…)をチェックしてください。

次に、babel のドキュメントを確認し、babelOptions にオプションを 1 つ追加しました。System.js の設定は次のようになりました。

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とbabelをブラウザに統合して、es6ソースコードモジュールをロードする方法がわかりません。

誰でも私を助けることができますか？どうもありがとう！！

編集

system.src.js を確認options.modules = 'system';し、babelTranspile 関数で削除しました。その後、上記のエラーはなくなりました。しかし、新たなエラーが発生しました。

plugins: ["transform-es2015-modules-systemjs"]babelOptions に含めなかった場合、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);

しかし、私はエラーが発生しました

require は関数ではありません。

babelOptionsに含めるplugins: ["transform-es2015-modules-systemjs"]と、ファイルは変換されず、app.js でエラーが発生します

system.src.js:57 Uncaught (in promise) エラー: SyntaxError: Unexpected token export

これを修正する方法を教えてください。返事を待っています。どうもありがとう

4

1 に答える 1