Sails.js与React.js,如何正确操作
Sails.js with React.js, how to do it correctly?
我想在我的Sails.js-application.中集成React.js+browserfy
为此,我使用了一个grunt插件grunt react。
我创建了一个文件/tasks/config/browserify.js
module.exports = function(grunt) {
grunt.config.set('browserify', {
//dev: {
options: {
transform: [ require('grunt-react').browserify ],
extension: 'jsx'
},
app: {
src: 'assets/jsx/app.jsx',
dest: '.tmp/public/js/app.js'
}
//}
});
grunt.loadNpmTasks('grunt-browserify');
};
然后我在compileAssets.js
和syncAssets.js
:中添加了一行
// compileAssets.js
module.exports = function (grunt) {
grunt.registerTask('compileAssets', [
'clean:dev',
'stylus:dev',
'browserify', // <<< this added
'copy:dev'
]);
};
和
// syncAssets.js
module.exports = function (grunt) {
grunt.registerTask('syncAssets', [
'stylus:dev',
'browserify', // <<< this added
'sync:dev'
]);
};
然后我修改了copy.js
中的一行。
// copy.js
module.exports = function(grunt) {
grunt.config.set('copy', {
dev: {
files: [{
expand: true,
cwd: './assets',
src: ['**/*.!(styl|jsx)'], /// <<< this modified
dest: '.tmp/public'
}]
},
build: {
files: [{
expand: true,
cwd: '.tmp/public',
src: ['**/*'],
dest: 'www'
}]
}
});
grunt.loadNpmTasks('grunt-contrib-copy');
};
它成功了
但我觉得我做得不太对。
如果我取消/tasks/config/browserify.js
中dev: {
和}
行的注释,如下所示:
module.exports = function(grunt) {
grunt.config.set('browserify', {
dev: { /// <<< this uncommented
options: {
transform: [ require('grunt-react').browserify ],
extension: 'jsx'
},
app: {
src: 'assets/jsx/app.jsx',
dest: '.tmp/public/js/app.js'
}
} /// <<< this uncommented
});
grunt.loadNpmTasks('grunt-browserify');
};
如果我在compileAssets.js
和syncAssets.js
:中进行更改
// compileAssets.js
module.exports = function (grunt) {
grunt.registerTask('compileAssets', [
'clean:dev',
'stylus:dev',
'browserify:dev', // <<< this added :dev
'copy:dev'
]);
};
和
// syncAssets.js
module.exports = function (grunt) {
grunt.registerTask('syncAssets', [
'stylus:dev',
'browserify:dev', // <<< this added :dev
'sync:dev'
]);
};
它不起作用
值得担心吗?
当我在compileAssets.js
和syncAssets.js
文件中添加browserify: dev
时,为什么它不起作用?
我找到了正确的解决方案。
UPD:现在,我们可以使用https://github.com/erikschlegel/sails-generate-reactjs
我创建了grunt reatify,允许您为JSX文件创建一个捆绑文件,以便更容易地使用模块化React组件。您所要做的就是指定父目标文件夹和源文件:
grunt.initConfig({
reactify: {
'tmp': 'test/**/*.jsx'
},
})
在Sails中,转到tasks/config文件夹,创建一个新文件"reatify.js"并插入以下代码:
module.exports = function (grunt) {
grunt.config.set('reactify', {
'[Destination folder]': '[folder containing React Components]/**/*.jsx'
});
grunt.loadNpmTasks('grunt-reactify');
};
然后转到文件tasks/register/compaileAssets.js并添加reatify:
module.exports = function (grunt) {
grunt.registerTask('compileAssets', [
'clean:dev',
'jst:dev',
'less:dev',
'copy:dev',
'coffee:dev',
'reactify'
]);
};
就这样!
相关文章:
- 如何在Node.js中正确构造类
- 表单未在角度 js 中正确发布
- 如何在 JS 中正确解析日期
- React.js+Flux-正确初始化存储中的数据对象
- 如何使用odatarsources.JS库正确解析AngularJS应用程序中的JS promise
- 这是使用承诺与 Sequelize.js的正确方法吗?
- NW.js未正确清除缓存
- 在 Vue 中具有内容分发的表.js未正确呈现
- 我无法获得 backbone.localstorage.js 来正确删除项目
- 如何在 React js 中正确使用 Refs
- 图表.js未正确显示/安装问题
- 时刻JS未正确转换日期
- 骨干网.js并正确重构
- JS无法正确显示加载的页面
- vim,在HTML中缩进CSS和JS的正确方法
- JS - 获取正确的窗口像素大小
- 使用.opopulate()mongodb Node.js的正确方法
- 节点js未正确返回函数的值
- node.js的正确继承
- 使用head.js按正确顺序正确加载脚本和依赖项