Javascript 如何使用 Babel 和 Grunt 正确编译项目
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28661499/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to compile a project properly with Babel and Grunt
提问by Druxtan
I'm trying to play with Babel, but it doesn't work well for me.
我正在尝试使用 Babel，但它对我来说效果不佳。
My project is simple
我的项目很简单
|-project/
|---src/
|-----index.html
|-----main.js
|-----module.js
|---Gruntfile.js
|---package.json
index.html
索引.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
模块.js
export function sum(x, y) {
return x + y;
}
Gruntfile.js
Gruntfile.js
module.exports = function(grunt) {
grunt.initConfig({
"babel": {
"options": {
"sourceMap": true,
"experimental": true
},
dist: {
files: [{
"expand": true,
"cwd": "src/",
"src": ["**/*.js"],
"dest": "build/",
"ext": ".js"
}]
}
},
htmlmin: {
dist: {
options: {
removeComments: true,
collapseWhitespace: true
},
files: [{
"expand": true,
"cwd": "src/",
"src": ["**/*.html"],
"dest": "build/",
"ext": ".html"
}]
}
},
watch: {
scripts: {
files: 'src/*.js',
tasks: ["babel"]
},
html: {
files: 'src/*.html',
tasks: ["htmlmin"]
}
}
});
grunt.loadNpmTasks('grunt-babel');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-htmlmin');
grunt.registerTask("default", ["babel", "htmlmin"]);
};
I run grunt, everything compile. But I can't use have the expected result.
我运行 grunt，一切都编译。但我不能使用有预期的结果。
First, the browser say require is not defined, so I add require.js to my HTML.
首先，浏览器说require is not defined，所以我将 require.js 添加到我的 HTML 中。
Then, I get Error: Module name "module" has not been loaded yet for context: _. Use require([]) http://requirejs.org/docs/errors.html#notloaded
然后，我得到 Error: Module name "module" has not been loaded yet for context: _. Use require([]) http://requirejs.org/docs/errors.html#notloaded
I'm a bit confused about all of these. How I can make my code work?
我对所有这些都有些困惑。我怎样才能让我的代码工作？
采纳答案by X?pplI'-I0llwlg'I -
To expand on veg_prog's answer, you should use something like Browserify if you want to organize your code into modules. Browserify can be used with Grunt via grunt-browserify, and Babel can be used with Browserify via babelify.
要扩展 veg_prog 的答案，如果要将代码组织成模块，则应该使用 Browserify 之类的东西。Browserify 可以通过grunt-browserify 与 Grunt 一起使用，而 Babel 可以通过babelify与 Browserify 一起使用。
I've tweaked some of your files to show you how it can be done:
我已经调整了您的一些文件以向您展示如何完成：
index.html
索引.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Test</title>
<script src="bundle.js" type="application/javascript"></script>
</head>
<body>
<p>Simple html file.</p>
</body>
</html>
main.js
主文件
import "babelify/polyfill"; // Needed for Babel's experimental features.
import * as math from "./module";
async function anwser() {
return 42;
}
(function main() {
anwser().then((v) => {
console.info(v);
});
console.log(math.sum(5, 5));
})();
Gruntfile.js
Gruntfile.js
module.exports = function(grunt) {
grunt.initConfig({
browserify: {
dist: {
options: {
transform: [["babelify", { "stage": 0 }]]
},
files: {
"build/bundle.js": "src/main.js"
}
}
},
htmlmin: {
dist: {
options: {
removeComments: true,
collapseWhitespace: true
},
files: [{
"expand": true,
"cwd": "src/",
"src": ["**/*.html"],
"dest": "build/",
"ext": ".html"
}]
}
},
watch: {
scripts: {
files: "src/*.js",
tasks: ["browserify"]
},
html: {
files: "src/*.html",
tasks: ["htmlmin"]
}
}
});
grunt.loadNpmTasks("grunt-browserify");
grunt.loadNpmTasks("grunt-contrib-watch");
grunt.loadNpmTasks("grunt-contrib-htmlmin");
grunt.registerTask("default", ["browserify", "htmlmin"]);
};
package.json
包.json
{
"devDependencies": {
"babelify": "6.0.1",
"grunt": "0.4.5",
"grunt-browserify": "3.6.0",
"grunt-contrib-htmlmin": "0.4.0",
"grunt-contrib-watch": "0.6.1"
}
}
回答by Niels Steenbeek
Babel uses 'common' by default. That doesn't work for requirejs. So, change modules to 'amd'.
Babel 默认使用'common'。这对 requirejs 不起作用。因此，将模块更改为“amd”。
"babel": {
"options": {
"sourceMap": true,
"experimental": true,
"modules": "amd" //This is the line to be added.
},
dist: {
files: [{
"expand": true,
"cwd": "src/",
"src": ["**/*.js"],
"dest": "build/",
"ext": ".js"
}]
}
}
Update for Babel6. See also http://babeljs.io/docs/plugins/transform-es2015-modules-amd/and https://babeljs.io/docs/plugins/
Babel6 的更新。另见http://babeljs.io/docs/plugins/transform-es2015-modules-amd/和https://babeljs.io/docs/plugins/
"babel": {
"options": {
"sourceMap": true,
"experimental": true,
"plugins": ["transform-es2015-modules-amd"] //This is the line to be added.
},
dist: {
files: [{
"expand": true,
"cwd": "src/",
"src": ["**/*.js"],
"dest": "build/",
"ext": ".js"
}]
}
}
回答by veg_prog
First, the browser say require is not defined, so I add require.js to my HTML.
首先，浏览器说 require 没有定义，所以我将 require.js 添加到我的 HTML 中。
I don't think, that adding require.js will be the solution. In this context require is node-style syntax: (https://github.com/substack/browserify-handbook#user-content-require).
我不认为，添加 require.js 将是解决方案。在这种情况下，require 是节点样式的语法：（https://github.com/substack/browserify-handbook#user-content-require）。
Browserify is a module loader but works different than requirejs. There is a babel distribution for requirejs, too (https://github.com/mikach/requirejs-babel) but I recommend using browserify.
Browserify 是一个模块加载器，但与 requirejs 的工作方式不同。requirejs 也有 babel 发行版（https://github.com/mikach/requirejs-babel），但我建议使用 browserify。
In a setup, where babel is working with browserify, something like this
在设置中，babel 与 browserify 一起工作，就像这样
import $ from'jquery';
will become something like this
会变成这样
var $ = require('jquery');
