3

お願いします!System.jsとbabelをブラウザに統合するにはどうすればよいですか?

ブラウザでSystem.jsとbabelをどのように組み合わせることができますか?

開発モードでは、純粋なes6ソースコードをブラウザーで使用して、運用モードのときにファイルをバンドルする必要があります。だから私は以下のようにsystem.jsとbabelを設定する。

最新版systemjs(0.19.24)とbabel-standalone(6.6.5)の両方をnpmでインストールしました。

私の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 (…)

は、その後、私はバベルのドキュメントをチェックして、この

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コンフィグ今、babelOptionsに1つのオプションを追加します。私はどのようにes6ソースコードモジュールをロードするためにブラウザでSystem.jsとbabelを混在させるのか分かりません。

誰でもお手伝いできますか?どうもありがとう!!

EDIT

私は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); 

以下に変換しかし、私は、私はbabelOptionsでplugins: ["transform-es2015-modules-systemjs"]が含まれている場合、そのファイルはありませんエラーに

require is not a function.

を持っています変換され、app.jsにエラーがスローされます

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

これを解決する方法を教えてください。返事をまつ。ありがとうございました

答えて

4

私はこの問題を解決しました。私はそれが私のせいだと思う。エラーes6の構文を書いています。私は今、私のシステムの設定は、今

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 export const app = ..

export app = ... insteadofを使用する必要があります。ハッピーコーディング〜

関連する問題