CODEWITHSUNDEEP
javascriptecmascript-6babeljssystemjses6-module-loader
Wyntau
Wyntau

Reputation: 203

How can I integrate System.js and babel in browsers?

Help please!

How can I intergrate System.js and babel in browsers?

I want to use the pure es6 source code in browser when in development mode, and bundle files together when in production mode. So I config system.js and babel like below.

I installed both the latest version systemjs(0.19.24) and babel-standalone(6.6.5) via npm.

my index.html is below

<!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

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

app.run();

and my app.js is below 

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. Check out http://babeljs.io/docs/plugins/#modules(…)

Then I checked babel docs, and add one option to babelOptions, now my System.js config like this

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.

Could anyone help me? Thanks very much!!

EDIT

I checked system.src.js, and removed options.modules = 'system'; in babelTranspile function. 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

(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

system.src.js:57 Uncaught (in promise) Error: SyntaxError: Unexpected token export

Please help me how to fix this. Waiting for reply. Thanks very much

Upvotes: 3

Views: 2475

Answers (1)

Wyntau
Wyntau

Reputation: 203

I solved the problem. I find it's my fault. I write error es6 syntax. I should use export const app = .. insteadof 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~

Upvotes: 4

Related Questions