我在项目中创建了一个React组件,我想在多个项目中使用它。目前,我只关心在本地和发展中做这件事。 React组件被渲染到根div中,项目使用webpack和babel将JSX,ES6和一些ES7特性转换成一个包。
我认为导出这个组件会很简单,这样我就可以运行npm install MyComponent
并开始在新项目中使用它。但是,我发现它并非如此直截了当。特别是,我已经阅读了几个小时和几个小时,似乎只是变得更加困惑。
如果我的最终目标是继续开发'MyComponent'在其包含的项目中,使用' MyComponent'在任何其他本地项目中,我有哪些选择?我做的第一件事就是将main
的{{1}}密钥更改为package.json
并运行/src/components/MyComponent
。这会生成一个npm pack
文件,我可以通过其绝对文件路径安装在其他项目中。但是,我发现es6和jsx没有被编译,因此我的客户端项目无法解析tgz
。然后我使用webpack转换为MyComponent
,但是当我lib/MyComponent
时,我只在控制台中看到import MyComponent from './path/to/MyComponent-1.0.0.tgz
(一个空对象)。
寻找我的问题的解决方案出现了许多不同的方法,将NPM,Grunt,Gulp,Babel,Webpack等组合在一起。而且我担心在我研究它之前会有更多的小时(几天?)可以理解的事情。
根据我的要求,我可以实现的最简单的解决方案是:1)将我的React组件编译成最简单的导入模块2)将其导入任何本地项目3)继续在原始主机项目中开发包变更很容易传播到客户项目。
答案 0 :(得分:6)
一般情况下,如果您要开始创建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
,则会对您的包裹进行整理/缩小,并进行其他一些您可能需要的修剪。sourcemap
,您可以使用dev工具在调试器窗口中检查缩小的代码等。react
和react-dom
标记为externals
- 这意味着他们不会捆绑在的捆绑包中。这很棒 - 因为这意味着您已经获得了react
个文件大小的2份以上,因为您已import
编辑了自己的组件!要使用它,你现在需要一些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
。如果您使用的是yarn
或不使用npm
,请相应地更新脚本。
其余的只是学习将包发布到version
或其他包存储库。主要是,只需将package.json
中的npm version
号码设置为新的(npm publish
),然后发布(npm
)。当然,您必须拥有npm login
帐户才能登录(npm
)。
一旦您发布到yarn add your-package-name
,您就可以react
。
请记住,我们将react-dom
和external
标记为window.React
- 所以在使用广告资源中,您需要确保它们可用{ {1}}和window.ReactDOM
- 或者您需要直接从node_modules/your-package-name/path/to/your/component.js
答案 1 :(得分:1)
您无需npm pack
包即可使用它。如果你把你的组件变成一个git repo并把它放在Github上,你可以使用NPM直接从Github安装它,使用npm install alex/mycomponent
alex
是你的github用户名,而mycomponent
是回购品名称。重新运行该命令将从Github重新安装,以防您对repo进行更改。
如果您对组件感到满意,可以将其上传到NPM注册表,以便像安装任何其他软件包一样进行安装(npm install name
)。首先使用Github使开发更容易。
默认情况下,Webpack可能无法从node_modules
编译内容。通常,软件包在发布之前都是预先编译的,但您应该能够配置webpack来构建“打包”组件以及应用程序的其余部分。也许这会有所帮助:https://stackoverflow.com/a/38008149/7486612
答案 2 :(得分:0)
首先查看现有的组件库,例如Material UI。 具体检查他们有的npm脚本(参见package.json):
"build:es2015": "cross-env NODE_ENV=production babel ./src --ignore *.spec.js --out-dir ./build",
"build:es2015modules": "cross-env NODE_ENV=production BABEL_ENV=modules babel ./src/index.js --out-file ./build/index.es.js",
"build:copy-files": "babel-node ./scripts/copy-files.js",
"build:umd:dev": "webpack --config scripts/umd.webpack.config.js",
"build:umd:prod": "cross-env NODE_ENV=production webpack --config scripts/umd.webpack.config.js",
"build": "npm run build:es2015 && npm run build:es2015modules && npm run build:copy-files && npm run build:umd:dev && npm run build:umd:prod",
这是非常复杂且高质量的组件库的示例,它确保无论您的构建管道如何,您都可以使用它。
使用webpack设置构建过程可能很麻烦,但是从一开始就不要过于专注,并且覆盖最直接的案例。
在处理组件时,请查看https://storybook.js.org/。
答案 3 :(得分:0)
为了将反应库推入NPM,您可能需要一些样板,它将为您安装和转换许多东西(您仍然可以使用当前的反应模块作为主要来源,只需按照我的结尾处的指南回答,那你肯定会得到所有的想法)
或者你也可以参考我之前对类似问题的回答: Issue with publishing to npm
=====
我还成功地将几个反应库推入NPM:
https://www.npmjs.com/~thinhvo0108
=====
你的github存储库的文件夹结构也应该像我的一样:
https://github.com/thinhvo0108/react-paypal-express-checkout
=====
下面有用的教程:
(样板来源)https://github.com/juliancwirko/react-npm-boilerplate
(作者的文章)http://julian.io/creating-react-npm-packages-with-es2015/