I have a browserify task that is configured like so:
module.exports = function(grunt) {
grunt.config.set('browserify', {
dev: {
src: 'assets/js/main.jsx',
dest: '.tmp/public/js/main.js',
options: {
debug: true,
extensions: ['.jsx'],
transform: ['reactify']
}
}
});
grunt.loadNpmTasks('grunt-browserify');
};
I tried configuring it to use es6 this way:
module.exports = function(grunt) {
grunt.config.set('browserify', {
dev: {
src: 'assets/js/main.jsx',
dest: '.tmp/public/js/main.js',
options: {
debug: true,
extensions: ['.jsx'],
transform: ['reactify', {'es6': true}]
}
}
});
grunt.loadNpmTasks('grunt-browserify');
};
This causes an error though:
Error: path must be a string
I can't understand from the docs how to do this given that I don't want to configure the transform in my package.json. Any help would be appreciated.
I was missing a bracket after the transform option. This works:
module.exports = function(grunt) {
grunt.config.set('browserify', {
dev: {
src: 'assets/js/main.jsx',
dest: '.tmp/public/js/main.js',
options: {
debug: true,
extensions: ['.jsx'],
transform: [
[ 'reactify', {'es6': true} ]
]
}
}
});
grunt.loadNpmTasks('grunt-browserify');
};
Alternatively, you can also compile ES6 modules simply (without Grunt/Gulp) by using watchify
.
In package.json, add the following:
{
"scripts": {
"build": "watchify -o build/bundle.js -v -d assets/js/main.jsx"
},
"devDependencies": {
"browserify": "^10.2.4",
"envify": "^3.4.0",
"reactify": "^1.1.1",
"watchify": "^3.2.2"
},
"browserify": {
"transform": [
["reactify", {"es6": true}],
"envify"
]
}
}
In your terminal/command prompt, run npm run-script build
.
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