如何在浏览器中集成 System.js 和 babel?
How can I integrate System.js and babel in browsers?
请帮忙!
如何在浏览器中集成 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(…)
然后我检查了 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');
但是出现同样的错误。我不知道如何在浏览器中集成 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
请帮我解决这个问题。等待回复。非常感谢
我解决了这个问题。我觉得是我的错。我写了错误的 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?
我想在 开发 模式下在浏览器中使用纯 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(…)
然后我检查了 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');
但是出现同样的错误。我不知道如何在浏览器中集成 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
请帮我解决这个问题。等待回复。非常感谢
我解决了这个问题。我觉得是我的错。我写了错误的 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');
现在,一切正常。编码愉快~