让 reactify 和 browserify 与 ES6 一起工作
Getting reactify and browserify to work with ES6
我有一个配置如下的 browserify 任务:
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');
};
我尝试将其配置为以这种方式使用 es6:
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');
};
虽然这会导致错误:
Error: path must be a string
鉴于我不想在我的 package.json 中配置转换,我无法从文档中了解如何执行此操作。任何帮助将不胜感激。
转换选项后我少了一个括号。这有效:
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');
};
或者,您也可以使用 watchify
.
简单地编译 ES6 模块(没有 Grunt/Gulp)
在package.json中添加以下内容:
{
"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"
]
}
}
在您的 terminal/command 提示中,运行 npm run-script build
。
我有一个配置如下的 browserify 任务:
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');
};
我尝试将其配置为以这种方式使用 es6:
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');
};
虽然这会导致错误:
Error: path must be a string
鉴于我不想在我的 package.json 中配置转换,我无法从文档中了解如何执行此操作。任何帮助将不胜感激。
转换选项后我少了一个括号。这有效:
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');
};
或者,您也可以使用 watchify
.
在package.json中添加以下内容:
{
"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"
]
}
}
在您的 terminal/command 提示中,运行 npm run-script build
。