如何在瀏覽器中集成System.js和babel？

Question

請幫忙！

如何在瀏覽器中集成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未捕獲（在promise中）錯誤：ReferenceError：[BABEL] http：// v：3000 / boot.js ：使用刪除的Babel 5選項：base.modules - 在插件中使用相應的模塊轉換plugins選項。 查看http://babeljs.io/docs/plugins/#modules (..)

然后我檢查了babel文檔，並為babelOptions添加了一個選項，現在我的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功能。 然后上面的錯誤消失。 但發生了新的錯誤。

如果我沒有在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"] ，那么文件不會被轉換，並會在app.js中拋出錯誤

system.src.js：57未捕獲（在promise中）錯誤：SyntaxError：意外的令牌導出

請幫我解決這個問題。 等待回復。 非常感謝

Answer 1

我解決了這個問題。 我發現這是我的錯。 我寫了錯誤es6語法。 我應該使用export const app = ..不是export app = ...

現在我的系統配置如下

System.config({
      baseURL: './',
      // or 'traceur' or 'typescript'
      transpiler: 'Babel',
      // or traceurOptions or typescriptOptions
      babelOptions: {
        plugins: ["transform-es2015-modules-systemjs"],
        presets: ['es2015', 'react']
      },
      map: {
        Babel: './node_modules/babel-standalone/babel.js'
      }
    });

System.import('boot.js');

現在，每個人都按預期工作。 快樂的編碼〜

如何在瀏覽器中集成System.js和babel？

問題描述

1 個解決方案

解決方案1
4 已采納 2016-03-19 02:30:48

如何在瀏覽器中集成System.js和babel？

問題描述

1 個解決方案

解決方案1 4 已采納 2016-03-19 02:30:48

解決方案1
4 已采納 2016-03-19 02:30:48