发表新帖
发表新帖

How to compile a project properly with Babel and Grunt

前端 未结
关注
3 1429
情话喂你
情话喂你 2021-01-30 11:26

I\'m trying to play with Babel, but it doesn\'t work well for me.

My project is simple

|-project/
|---src/
|-----index.html
|-----main.js
|-----module.js
相关标签:
3条回答
  • 暗喜
    2021-01-30 11:26

    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.

    I've tweaked some of your files to show you how it can be done:

    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>

    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

    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"
  }
}
    0 讨论(0)
  • 萌比男神i
    2021-01-30 11:38

    First, the browser say require is not defined, so I add require.js to my 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).

    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.

    In a setup, where babel is working with browserify, something like this

    import $ from'jquery';

    will become something like this

    var $ = require('jquery');
    0 讨论(0)
  • 死守一世寂寞
    2021-01-30 11:42

    Babel uses 'common' by default. That doesn't work for requirejs. So, change modules to '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/

    "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"
        }]
    }
}
    0 讨论(0)
 看不清?
提交回复
热议问题