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 - 使用{{1}中相应的模块转换插件} 选项。查看http://babeljs.io/docs/plugins/#modules（...）

然后我检查了babel文档，并为babelOptions添加了一个选项，现在我的System.js配置就像这样

plugins

但是同样的错误发生了。我不知道如何在浏览器中集成System.js和babel来加载es6源代码模块。

有人能帮帮我吗？非常感谢!!

修改

我检查了system.src.js，并删除了babelTranspile函数中的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');。然后上面的错误消失。但是发生了新的错误。

如果我在babelOptions中没有包含options.modules = 'system';，则js文件会转换为

plugins: ["transform-es2015-modules-systemjs"]

但是我收到了错误

要求不是一种功能。

如果我在babelOptions中包含(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);，那么文件不会被转换，并且会在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 个答案: