Menu
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 |---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: { 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.
First, the browser say require is not defined, so I add require.js to my HTML.
Then, I get 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?
699
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" } } 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" }] } } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
