如何创建一个前端 React 组件并发布到 NPM

作为初学者，“造轮子”是非常有效的学习方法。在熟练掌握API的搬运方法之后，我们可以通过自己“造轮子”来进一步掌握和理解更底层的知识。

完成一个组件的开发之后，我们可以打包上传到 NPM 来分享自己的成果。在后面的步骤中，我们将会实现三个小目标：

配置 webpack 和相关文件
创建一个 test project
发布到 NPM

我在这个例子里面做了一个叫做 react-tiny-autosuggest 轮子。

这里是完成后的文件树：

//  tree -I node_modules 
.
├── dist
│   └── bundle.js
├── examples
│   └── demo-proj
│       ├── README.md
│       ├── package-lock.json
│       ├── package.json
│       ├── public
│       │   ├── favicon.ico
│       │   ├── index.html
│       │   └── manifest.json
│       └── src
│           ├── App.css
│           ├── App.js
│           ├── App.test.js
│           ├── index.css
│           ├── index.js
│           ├── logo.svg
│           └── registerServiceWorker.js
├── package-lock.json
├── package.json
├── src
│   ├── autoSuggest.css
│   ├── autoSuggest.js
│   └── index.js
└── webpack.config.js

配置webpack, babel, package.json

package.json

mkdir react-tiny-autosuggest
cd react-tiny-autosuggest
npm init -y

这里我们需要改动三个地方：

main: 这里是我们组件的入口文件。开发者在 import 我们的组件的时候会引入这里 export 的内容
files: 申明将要发布到 npm 的文件。如果省略掉这一项，所有文件包括源代码会被一起上传到 npm
scripts: 加入一个 build 指令来运行 webpack，此时运行的 webpack 是这个当前文件夹内安装的 webpack 而不是 global 的 webpack

// package.json
    
...
"main": "dist/bundle.js",
"files": ["dist"],
"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "build": "webpack"
},
...

Dependencies

npm i react react-proptypes
npm i -D babel-core babel-loader babel-preset-env babel-preset-react webpack webpack-node-externals css-loader style-loader

webpack.config.js

通过 babel 转换 JSX 和 ES6 代码
css-loader, sytle-loader 引入 css 到打包文件
webpack-node-externals 可以避免把 node_modules 里面的依赖包引入打包文件
libraryTarget: "commonjs2" 使 test project 可以找到我们打包后的组件

const path = require('path');
const nodeExternals = require('webpack-node-externals');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
    libraryTarget: 'commonjs2'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  },
  externals: [nodeExternals()]
};

.babelrc

transpile JSX and ES6 code

{
  "presets": ["env", "react"]
}

完成以上步骤以后我们可以在 src 文件夹里面完成自己组件，打包并 link 让 test project 引入这个打包后的组件。

npm run build
npm link

cd [test project folder]
npm link react-tiny-autosuggest

创建 test project

完成组件的编写之后，我们可以在本地做一个 test project 来引入组件并看到成果。

使用 create-react-app 创建一个 react 项目，并 link 我们刚才完成的组件：

create-react-app demo-proj
cd demo-proj
npm link react-tiny-autosuggest

link 之后我们可以直接在 react project 中引入组件

import AutoSuggest from 'react-tiny-autosuggest';

运行 npm start 可以看到 test project 的结果。

发布到 NPM

发布组件到 npm: npm publish

取消发布: npm unpublish

更行版本: 更改 package.json 里面的版本号并重新发布

原文地址：https://www.jianshu.com/p/db6113c94dbc