如何在浏览器中集成 System.js 和 babel？答案

【问题标题】：How can I integrate System.js and babel in browsers?如何在浏览器中集成 System.js 和 babel？
【发布时间】：2016-03-18 22:46:06
【问题描述】：

请帮忙！

如何在浏览器中集成 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: Using removed Babel 5 option: 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，并在 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);

但我得到了错误

require 不是函数。

如果我在 babelOptions 中包含plugins: ["transform-es2015-modules-systemjs"]，那么文件不会被转换，并且会在 app.js 中抛出错误

system.src.js:57 Uncaught (in promise) 错误：SyntaxError: Unexpected token export

请帮我解决这个问题。等待回复。非常感谢

【问题讨论】：

标签： javascript ecmascript-6 babeljs systemjs es6-module-loader

【解决方案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');

现在，一切都按预期工作。编码愉快~

【讨论】：