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

如何在瀏覽器中整合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) 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 (…)

然後我檢查巴貝爾文檔，並添加一個選項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 is not a function.

如果我包括babelOptions plugins: ["transform-es2015-modules-systemjs"]，然後文件不轉化，並將拋出錯誤在app.js

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

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

來源

2016-03-18 Treri

我解決了這個問題。我覺得這是我的錯。我寫錯誤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');

現在，符合市場預期everythins作品。快樂編碼〜

來源

2016-03-19 02:30:48 Treri

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

回答

相關問題