打包一个react组件并发布到npm上

准备

Node环境
GitHub https://www.jianshu.com/p/7edb6b838a2e （for mac）
https://blog.csdn.net/qazwsxpcm/article/details/68946736 （for windows）
npm上注册账号 https://www.npmjs.com/

创建仓库

我们随便取一个仓库名one-antd-test

image.png

复制仓库地址备用。

WeChat57685c7fd6038e97d350e43dd6b3ec12.png

随便添加一个文件，我们可以添加一个README.md

WeChatad8986710238b5223c28dfbed9b4aabb.png

建立本地分支

$ git clone [刚才复制的git地址]

$ cd one-test-antd

初始化生成package.json文件

$ npm init (根据提示一路回车，最后yes)

安装依赖

$ npm i -S react react-dom

$ npm i -D webpack webpack-cli @babel/core @babel/preset-env @babel/preset-react @babel-loader css-loader style-loader html-webpack-plugin webpack-dev-server clean-webpack-plugin webpack-node-externals

修改package.json文件

"main": "dist/bundle.js", 
"files": ["dist"],
"scripts": {
    "start": "export NODE_ENV='development' && webpack-dev-server",
    "dev": "export NODE_ENV='development' && webpack-dev-server", // 设置环境变量
    "build": "export NODE_ENV='production' && webpack"
  },

配置webpack

先看下我们预期的目录结构

image.png

public/index.html 我们放一个html模板文件
src/app.js 本地运行时入口文件
src/components 存放组件
src/components/NewButton 简单写一个示例组件

webpack.config.js

const path = require('path');
const NODE_ENV = process.env.NODE_ENV; // 获取环境变量
const isProd = NODE_ENV === 'production';
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin'); // 每次构建清除上一次打包出来的文件
const nodeExternals = require('webpack-node-externals');
const plugins = isProd ? [new CleanWebpackPlugin()] : [
  new CleanWebpackPlugin(),
  new HtmlWebpackPlugin({
    template: 'public/index.html'
  }),
]

module.exports = {
  mode: isProd ? 'production' : 'development',
  entry: isProd ? './src/components/index.js' : './src/app.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, './dist'),
    libraryTarget: isProd ? 'commonjs2' : undefined,  // 包需要被module.exports，这就要用到common
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
    ]
  },
  devServer: {
    contentBase: './dist'
  },
  externals: isProd ? [nodeExternals()] : [], // nodeExternals 使得打包的组件中不包括任何 node_modules 里面的第三方组件，起到减小体积的作用。
  plugins,
};

.babelrc babel的配置文件

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

src/components/NewButton/index.js

import React from 'react';
import './index.css';

export default function NewButton(props) {
  return (
  <button style={{ color: 'red' }} className="btn-style">{props.name}</button>
  )
}

src/components/NewButton/index.css

.btn-style {
  border-color: blue;
}

src/components/index.js

export { default as NewButton } from './NewButton/index';

src/app.js

import React from 'react';
import ReactDOM from 'react-dom';
import { NewButton } from './components';

function App() {
  return (
    <NewButton name="新按钮" />
  )
}

ReactDOM.render(<App />, document.getElementById('root'));

$npm run start 本地运行成功,接下来试下生产环境$ npm run build

如果出现 “This is probably not a problem with npm. There is likely additional logging output above.” 报错可以尝试 $ rm-rf node_modules && npm i 删除之前的依赖重新安装。

提交代码到仓库

根目录下建一个.gitignore文件屏蔽一些不需要提交到git上的文件

/node_modules
/dist
/build
.DS_Store
npm-debug.log*

$ git add .

$ git commit -m "create a package"

$ git push

发布

$ npm login 登录根据提示输入账号、密码、邮箱

$ npm publish (注意publish命令只能用npm 不能用cnpm之类)
如果发布不成功，改一下package.json里的name换个包名（有可能是包名和其他包重复了）