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

Question

Help please! 请帮忙！

How can I intergrate System.js and babel in browsers? 如何在浏览器中集成System.js和babel？

I want to use the pure es6 source code in browser when in development mode, and bundle files together when in production mode. 我想在开发模式下在浏览器中使用纯es6源代码，并在生产模式下将文件捆绑在一起。 So I config system.js and babel like below. 所以我配置system.js和babel如下。

I installed both the latest version systemjs (0.19.24) and babel-standalone (6.6.5) via npm. 我通过npm安装了最新版本systemjs （0.19.24）和babel-standalone （6.6.5）。

my index.html is below 我的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>

and my boot.js is below 我的boot.js在下面

import { app } from './app.js'

app.run();

and my app.js is below 我的app.js在下面

export app = {
  run: function(){
    console.log('app')
    alert('app')
  }
}

And when I visit the page, console have errors. 当我访问该页面时，控制台出错。

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. system.src.js：57未捕获（在promise中）错误：ReferenceError：[BABEL] http：// v：3000 / boot.js ：使用删除的Babel 5选项：base.modules - 在插件中使用相应的模块转换plugins选项。 Check out http://babeljs.io/docs/plugins/#modules (…) 查看http://babeljs.io/docs/plugins/#modules (..)

Then I checked babel docs, and add one option to babelOptions, now my System.js config like this 然后我检查了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');

But the same error occur. 但是会发生同样的错误。 I have no idea how to intergrate System.js and babel in browers to just load es6 source code module. 我不知道如何在浏览器中集成System.js和babel来加载es6源代码模块。

Could anyone help me? 谁能帮助我？ Thanks very much!! 非常感谢！！

EDIT 编辑

I checked system.src.js, and removed options.modules = 'system'; 我检查了system.src.js，并删除了options.modules = 'system'; in babelTranspile function. 在babelTranspile功能。 then above error gone. 然后上面的错误消失。 but new error occured. 但发生了新的错误。

If I didn't include plugins: ["transform-es2015-modules-systemjs"] in babelOptions, js files are transformed to below 如果我没有在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);

But I got the error 但我得到了错误

require is not a function. 要求不是一种功能。

If I include plugins: ["transform-es2015-modules-systemjs"] in babelOptions, then files are not transformed, and will throw up error in app.js 如果我在babelOptions中包含plugins: ["transform-es2015-modules-systemjs"] ，那么文件不会被转换，并会在app.js中抛出错误

system.src.js:57 Uncaught (in promise) Error: SyntaxError: Unexpected token export system.src.js：57未捕获（在promise中）错误：SyntaxError：意外的令牌导出

Please help me how to fix this. 请帮我解决这个问题。 Waiting for reply. 等待回复。 Thanks very much 非常感谢

Answer 1

I solved the problem. 我解决了这个问题。 I find it's my fault. 我发现这是我的错。 I write error es6 syntax. 我写了错误es6语法。 I should use export const app = .. insteadof export app = ... 我应该使用export const app = ..不是export app = ...

Now my System config is below 现在我的系统配置如下

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');

Now, everythins works as expected. 现在，每个人都按预期工作。 Happy coding~ 快乐的编码〜

如何在浏览器中集成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