我正在尝试使用Babel,但它对我来说效果不佳.
我的项目很简单
|-project/
|---src/
|-----index.html
|-----main.js
|-----module.js
|---Gruntfile.js
|---package.json
的index.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Test</title>
<script src="main.js" type="application/javascript"></script>
</head>
<body>
<p>Simple html file.</p>
</body>
</html>
main.js
import * as math from "./module";
async function anwser() {
return 42;
}
(function main() {
anwser().then((v) => {
console.info(v);
});
console.log(math.sum(5, 5));
})();
module.js
export function sum(x, y) {
return x + y;
}
Gruntfile.js
module.exports = function(grunt) {
grunt.initConfig({
"babel": {
"options": {
"sourceMap": true,
"experimental": true
},
dist: …我没有使用Browserify,只是Gulp和Node,只想前言.
./
./gulpfile.js
./_GULP
./_GULP/main_config.es6
./_GULP/_classes/Gcfg.es6
我正在导出一个类Gcfg.es6文件,如下所示:
export default class Gcfg {
constructor() {
this.rootDir = './';
this.latestDir = './_LATEST/';
this.srcFolder = './_SRC/';
...
}
getSrcDir(dir="") {
return this.srcFolder + dir;
}
...
}
在main_config.es6我试图导入:
import Gcfg from '_classes/Gcfg';
关注这个GitHub帖子:
https://github.com/babel/babel/issues/849
我以为我做得很好.我正在使用WebStorm并有一个"文件监视器"设置来保存.es6文件来运行Babel.我没有做任何花哨的事情,我使用的唯一可选标志是:
--source-maps 和 --out-file $FileNameWithoutExtension$.js $FilePath$
$ FileNameWithoutExtension $ .js是一个WebStorm应用程序变量,只是由观察者加载的文件,$ FilePath $是文件的绝对路径.
所以命令看起来像这样(我相信我实际上看不到它执行):
babel --source-maps --out-file main_config.js ./_GULP/ 等其他文件......
我相信所有文件都由babel处理.我在生成的JS中看到了导出和需求.
在gulpfile.js我做的:
gCfg = require('./_GULP/main_config'); < - …