Javascript 如何使用Babel和Grunt正确编译项目_Javascript_Gruntjs_Babeljs

Javascript 如何使用Babel和Grunt正确编译项目

javascript gruntjs

Javascript 如何使用Babel和Grunt正确编译项目,javascript,gruntjs,babeljs,Javascript,Gruntjs,Babeljs,我想和巴贝尔一起玩，但对我来说不太好我的项目很简单 |-project/ |---src/ |-----index.html |-----main.js |-----module.js |---Gruntfile.js |---package.json index.html module.js Grunfile.js 我运行grunt，一切都编译好了。但是我不能使用预期的结果首先，浏览器说，require没有定义，所以我将require.js添加到我的HTML中然后，我得到错误：尚

我想和巴贝尔一起玩，但对我来说不太好

我的项目很简单

|-project/
|---src/
|-----index.html
|-----main.js
|-----module.js
|---Gruntfile.js
|---package.json

index.html

module.js

Grunfile.js

我运行grunt，一切都编译好了。但是我不能使用预期的结果

首先，浏览器说，

require没有定义，所以我将require.js添加到我的HTML中
然后，我得到错误：尚未为上下文加载模块名“Module”：。使用require（[]）http://requirejs.org/docs/errors.html#notloaded

我对所有这些都有点困惑。如何使我的代码工作
首先，浏览器说require没有定义，所以我在HTML中添加require.js
我认为，添加require.js不是解决方案。
在此上下文中，需要的是节点样式语法：
（）
Browserify是一个模块加载器，但其工作原理与requirejs不同。
requirejs也有一个babel发行版（），但我建议使用browserify
在一个设置中，babel正在使用browserify，类似这样的东西
import $ from'jquery';

var $ = require('jquery');

会变成这样
import $ from'jquery';

var $ = require('jquery');

要扩展veg_prog的答案，如果您想将代码组织到模块中，应该使用类似Browserify的东西。Browserify可与Grunt via配合使用，Babel可与Browserify via配合使用
我已经调整了您的一些文件，向您展示了如何完成：
index.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>

grunfile.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));
})();

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
{
  "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"
  }
}

默认情况下，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"
        }]
    }
}

更新Babel6。另见
及
或者更好：“umd”
{
  "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"
  }
}

"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"
        }]
    }
}

"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"
        }]
    }
}