如何使用Grunt + Browserify创建独立的React & React捆绑包？
我正在尝试配置Grunt & Browserify输出一个独立的捆绑包，其中包含React as CommonJS模块，这样它就可以被其他捆绑包引用。
我现在遇到的问题是别名似乎不起作用。尽管我已经在下面的外部包vendor中指定了别名，并且已经指定这些模块应该在所有其他模型中从外部加载，但我在运行时仍然收到一个错误，指出找不到'react‘模块。
如果有人知道我这里的grunt-browserify语法可能出了什么问题，那就太好了：
var externals = [
'react',
'react/addons',
'jquery',
'backbone',
'react-router'
];
module.exports = function(grunt) {
grunt.config.set('browserify', {
main: {
src: 'assets/js/main.jsx',
dest: '.tmp/public/js/main.js',
options: {
debug: true,
extensions: ['.jsx'],
external: externals,
transform: [
['babelify', {'stage': 0}]
]
}
},
signup: {
src: 'assets/js/signup.jsx',
dest: '.tmp/public/js/signup.js',
options: {
debug: true,
extensions: ['.jsx'],
external: externals,
transform: [
['babelify', {'stage': 0}]
]
}
},
login: {
src: 'assets/js/login.jsx',
dest: '.tmp/public/js/login.js',
options: {
debug: true,
insertGlobals: true,
extensions: ['.jsx'],
external: externals,
transform: [
['babelify', {'stage': 0}]
]
}
},
vendor: {
src: [
'./node_modules/react/dist/react.js',
'./node_modules/react/dist/react-with-addons.js',
'./node_modules/jquery/dist/jquery.js',
'./node_modules/backbone/backbone.js',
],
dest: '.tmp/public/js/dependencies/vendor.js',
options: {
debug: false,
alias: {
'react:': './node_modules/react/dist/react.js',
'react/addons': './node_modules/react/dist/react-with-addons.js',
'jquery': './node_modules/jquery/dist/jquery.js',
'backbone': './node_modules/backbone/backbone.js',
'react-router': './node_modules/react-router/lib/index.js'
},
shim: {
react_router: {
path: './node_modules/react-router/lib/index.js',
exports: 'react-router'
}
},
external: null
}
}
});
grunt.loadNpmTasks('grunt-browserify');
};回答 2
Stack Overflow用户
发布于 2015-06-17 19:49:51
我发现这个link对我很有帮助。按照这种方法，您的vendor部分应该如下所示
vendor: { src: ['.'], dest: '.tmp/public/js/dependencies/vendor.js', options: { debug: false, alias: externals.map(function(module) { return module + ':'; }), shim: { react_router: { path: './node_modules/react-router/lib/index.js', exports: 'react-router' } }, external: null } }
我对上面的shim部分不太确定，因为我只在react模块中尝试过。
Stack Overflow用户
发布于 2015-08-08 00:56:45
我正在与ReactJS合作开发Sails 0.11.0项目。我开始使用grunt任务来处理应用程序代码的重新捆绑/转换，同时使用供应商任务来捆绑模块化的代码。此外，我还必须将vendor.js添加到布局文件中。
我还是个新手，所以可能有更有效的方法来做到这一点。
browserify.js
var externals = [
'react',
'react/addons',
'jquery',
'react-router',
'events'
]
module.exports = function(grunt){
grunt.config.set('browserify', {
dist: {
options: {
external: externals,
transform: [
['babelify', {
loose: 'all'
}]
]
},
files: {
".tmp/public/js/bundle.js": ["assets/js/bundle.js", "react/**/*"]
}
},
vendor: {
src: [
'./node_modules/react/dist/react.js',
'./node_modules/react/dist/react-with-addons.js',
'./node_modules/jquery/dist/jquery.js',
'./node_modules/react-router/lib/index.js',
'./node_modules/events/events.js'
],
dest: '.tmp/public/js/dependencies/vendor.js',
options: {
alias: {
'react': './node_modules/react/dist/react.js',
'react/addons': './node_modules/react/dist/react-with-addons.js',
'jquery': './node_modules/jquery/dist/jquery.js',
'react-router': './node_modules/react-router/lib/index.js',
'events': './node_modules/events/events.js'
}
}
}
});
grunt.loadNpmTasks('grunt-browserify');
}任务/配置：
module.exports = function(grunt) {
grunt.config.set('watch', {
api: {
// API files to watch:
files: ['api/**/*', '!**/node_modules/**']
},
assets: {
// Assets to watch:
files: ['assets/**/*', 'tasks/pipeline.js', '!**/node_modules/**'],
// When assets are changed:
tasks: ['syncAssets' , 'linkAssets', 'browserify:dist']
},
react: {
files: ['react/**/*'],
tasks: ['browserify:dist']
}
});
grunt.loadNpmTasks('grunt-contrib-watch');
};https://stackoverflow.com/questions/30774105
复制相似问题