一般来说，如果您要开始将 React 组件创建为单独的包（这是一个很好的模式，出于您已经提到的所有原因） - 您将需要至少获得一个对webpack 和babel 有点熟悉。这里有很多东西要学，但让我试着为你指明正确的方向：
// webpack.config.js
/* eslint-disable */
const path = require('path')
const webpack = require('webpack')
const ENVIRONMENT = process.env.NODE_ENV
const PRODUCTION = ENVIRONMENT === 'production'
const SOURCEMAP = !PRODUCTION || process.env.SOURCEMAP
const library = 'your-lib-name' // << RENAME THIS <<
const filename = PRODUCTION ? `${library}.min.js` : `${library}.js`
const plugins = []
if (PRODUCTION) {
plugins.push(
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(ENVIRONMENT),
}),
new webpack.optimize.ModuleConcatenationPlugin(),
new webpack.optimize.UglifyJsPlugin({
minimize: true,
output: { comments: false, semicolons: false },
sourceMap: SOURCEMAP,
})
)
}
module.exports = {
devtool: SOURCEMAP ? 'source-map' : 'none',
entry: `${__dirname}/path/to/your/component.js`, // << RENAME THIS <<
externals: {
'react': 'react',
'react-dom': 'react-dom',
},
module: {
loaders: [{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/,
}],
},
output: {
filename,
library,
path: `${__dirname}/lib`,
libraryTarget: 'umd',
umdNamedDefine: true,
},
plugins,
}
我知道这看起来像一堆 - 但它可以处理您想要的大部分内容。具体来说：
- 如果您在构建时指定
NODE_ENV=production，这将 uglify/minify 您的包，并进行一些您以后可能需要的其他修剪。
- 使用此脚本构建将输出
sourcemap，您可以将其与开发工具一起用于在调试器窗口中检查您的缩小代码等。
- 这会将
react 和react-dom 标记为externals - 这意味着它们不会被捆绑在您的捆绑包中内。这很棒 - 因为这意味着您不会因为 imported 自己的组件而获得 react 的文件大小的 2+ 个副本！
不过，要使用它，您现在需要一些 package.json 的爱。
package.json
{
"name": "Your Name",
"version": "0.0.1",
"description": "This is my awesome react package!",
"main": "path/to/your/component.js",
"author": "Your Name",
"license": "MIT",
"repository": { /* Your Repo Info Here */ },
"dependencies": {
"any-packages-you-need-included-in-builds": "^1.0.0"
},
"devDependencies": {
"babel-cli": "^6.22.2",
"babel-loader": "^7.1.0",
"babel-preset-es2015": "^6.22.0",
"babel-preset-react": "^6.22.0",
"prop-types": "^15.5.10",
"react-dom": "^15.6.1",
"webpack": "^3.0.0"
},
"scripts": {
"build": "yarn prebuild && NODE_ENV=production webpack",
"prebuild": "mkdir -p ./lib && rm -rf ./lib/*"
}
}
显然，如果您需要，您可以在这里拥有更多 - 例如您在转译中使用的其他 babel-plugin-* 插件、其他包等。但是这个集合将让您的 webpack 构建运行。请注意，此处的脚本假定您使用的是yarn - 这样您就可以运行yarn build，并且您在posix 系统上，以便mkdir 工作。如果您在 Windows 上或不使用 yarn，只需相应地更新脚本即可。
剩下的只是学习将你的包发布到npm 或另一个包存储库。首先，这只是将package.json 中的version 数字设置为新的（npm version），然后发布（npm publish）。当然，您必须拥有一个 npm 帐户 - 并登录 (npm login)。
一旦您发布到npm，您就可以直接yarn add your-package-name。
请记住，虽然 - 我们将 react 和 react-dom 标记为 external - 所以在消费包中，您需要确保它们可以作为 window.React 和 window.ReactDOM 使用 - 或者您需要直接包含来自node_modules/your-package-name/path/to/your/component.js的组件