在同构的React应用中，我有一个名为myModule的模块，它在Node和浏览器环境下的行为应该不同。我想在package.json中为myModule配置这个分离点：
package.json
{
"private": true,
"name": "myModule",
"main": "./myModule.server.js",
"browser": "./myModule.client.js"
}
文件结构
├── myModule
│ ├── myModule.client.js
│ ├── myModule.server.js
│ └── package.json
│
├── browser.js
└── server.js
所以当我在Node.js中使用myModule时，我应该只得到myModule.server.js：
server.js
import myModule from './myModule';
myModule(); // invoke myModule.server.js
在浏览器端应该只使用
myModule.client.js构建捆绑包：
browser.js
import myModule from './myModule';
myModule(); // invoke myModule.client.js
React Starter Kit使用这种方法，但我无法确定此配置定义在哪里。
动机
package.json是执行此类拆分的良好语义点。- 客户端捆绑包仅包含
myModule.client.js。
已知解决方案-对我来说不是答案
您可以拥有此类文件结构：
├── myModule
│ ├── myModule.client.js
│ ├── myModule.server.js
│ └── index.js <-- difference
│
├── browser.js
└── server.js
并且在index.js中：
if (process.browser) { // this condition can be different but you get the point
module.exports = require('./myModule.client');
} else {
module.exports = require('./myModule.server');
}
这样做的主要问题是客户端捆绑包中包含了大量重 kB 的后端代码。
我的 webpack 配置
我包含了我的 webpack.config.js。奇怪的是，这个配置总是指向 myModule.client.js 用于在浏览器和 node 中。
const webpack = require('webpack');
var path = require('path');
var fs = require('fs');
const DEBUG = !process.argv.includes('--release');
const VERBOSE = !process.argv.includes('--verbose');
const AUTOPREFIXER_BROWSERS = [
'Android 2.3',
'Android >= 4',
'Chrome >= 35',
'Firefox >= 31',
'Explorer >= 9',
'iOS >= 7',
'Opera >= 12',
'Safari >= 7.1',
];
let nodeModules = {};
fs.readdirSync('node_modules')
.filter(function(x) {
return ['.bin'].indexOf(x) === -1 ;
})
.forEach(function(mod) {
nodeModules[mod] = 'commonjs ' + mod;
});
let loaders = [
{
exclude: /node_modules/,
loader: 'babel'
},
{
test: [/\.scss$/,/\.css$/],
loaders: [
'isomorphic-style-loader',
`css-loader?${DEBUG ? 'sourceMap&' : 'minimize&'}modules&localIdentName=` +
`${DEBUG ? '[name]_[local]_[hash:base64:3]' : '[hash:base64:4]'}`,
'postcss-loader?parser=postcss-scss'
]
},
{
test: /\.(png|jpg|jpeg|gif|svg|woff|woff2)$/,
loader: 'url-loader',
query: {
name: DEBUG ? '[name].[ext]' : '[hash].[ext]',
limit: 10000,
},
},
{
test: /\.(eot|ttf|wav|mp3)$/,
loader: 'file-loader',
query: {
name: DEBUG ? '[name].[ext]' : '[hash].[ext]',
},
},
{
test: /\.json$/,
loader: 'json-loader',
},
];
const common = {
module: {
loaders
},
plugins: [
new webpack.optimize.OccurenceOrderPlugin(),
],
postcss: function plugins(bundler) {
var plugins = [
require('postcss-import')({ addDependencyTo: bundler }),
require('precss')(),
require('autoprefixer')({ browsers: AUTOPREFIXER_BROWSERS }),
];
return plugins;
},
resolve: {
root: path.resolve(__dirname, 'src'),
extensions: ['', '.js', '.jsx', '.json']
}
};
module.exports = [
Object.assign({} , common, { // client
entry: [
'babel-polyfill',
'./src/client.js'
],
output: {
path: __dirname + '/public/',
filename: 'bundle.js'
},
target: 'web',
node: {
fs: 'empty',
},
devtool: DEBUG ? 'cheap-module-eval-source-map' : false,
plugins: [
...common.plugins,
new webpack.DefinePlugin({'process.env.BROWSER': true }),
],
}),
Object.assign({} , common, { // server
entry: [
'babel-polyfill',
'./src/server.js'
],
output: {
path: __dirname + '',
filename: 'server.js'
},
target: 'node',
plugins: [
...common.plugins,
new webpack.DefinePlugin({'process.env.BROWSER': false }),
],
node: {
console: false,
global: false,
process: false,
Buffer: false,
__filename: false,
__dirname: false,
},
externals: nodeModules,
})
];
react-starter-kit也有不同的webpack配置用于客户端和服务器端。不确定这是否是使魔法发生的原因，但我想你可以看一下：https://github.com/kriasoft/react-starter-kit/blob/master/tools/webpack.config.js#L202 和 https://github.com/kriasoft/react-starter-kit/blob/master/tools/webpack.config.js#L261 - Vasil Dininskimodule.exports中，我将这两个配置合并成一个数组。react-starter-kit中也是如此 https://github.com/kriasoft/react-starter-kit/blob/master/tools/webpack.config.js#L309 - Everettss