前言

之前做了一个loading的款式组件，为了实现代码的可重用性，将这个小我的项目打包并且公布在了npm上。在一次次的打包发包过程中经验了一个有一个报错，@buzuosheng/loading这个组件曾经到了2.7.0版本，尽管还有一些要调整的中央，但总算是能够用了。

webpack和rollup比照

webpack算是应用程序员应用最多的打包工具，面试中往往会问到webpack的相干问题，而rollup被问到的要少很多。导致这种景象的一个起因是，利用开发应用webpack，库开发应用rollup的说法。

然而两个打包工具都有很弱小的插件开发性能，性能差别越来越含糊，然而rollup应用起来更加简洁，而且能打出能小体积的文件。但当咱们做前端利用时，性能剖析往往要求更小的库，所以rollup更合乎开发库的要求。

这次算是一个打包的试验，咱们应用两个工具都对这个我的项目打一次包。

应用webpack打包

在打包之前，须要给package.json文件中增加或更改一些字段。

{  // 程序主入口模块，用户援用的就是该模块的导出  "main": "dist/bundle.js",  // 我的项目蕴含的文件  "files": [    "src",    "dist"  ],  // 将react和react-dom挪动到该配置中，兼容依赖  "peerDependencies": {    "react": "^17.0.1",    "react-dom": "^17.0.1"  },}

webpack打包须要用到很多库来解决不同的文件，这个我的项目比拟小，就只用了两个库。

// webpack.config.jsconst path = require('path');const MiniCssExtractPlugin = require("mini-css-extract-plugin");module.exports = {  mode: 'production',  entry: './src/Loading.jsx',  output: {    filename: "index.js",    path: path.join(__dirname, "./dist/"),    libraryTarget: 'umd',  },  optimization: {    minimize: false,  },  resolve: {    extensions: ['.jsx']  },  module: {    rules: [      {        test: /\.css$/,        loader: [MiniCssExtractPlugin.loader, 'css-loader?modules'],      },      {        test: /\.(js|jsx)$/,        loader: "babel-loader",        exclude: /node_modules/,      },    ]  },  plugins: [    new MiniCssExtractPlugin({      filename: "main.min.css" // 提取后的css的文件名    })  ],}

原本应该写开发和生产两个环境下的配置，但在这里只写了production环境下的配置。

应用rollup打包

在rollup中应用的库比拟多一点。

// rollup.config.js// 解决rollup无奈辨认commonjs的问题import commonjs from 'rollup-plugin-commonjs'// babel解决es6代码的转换import babel from 'rollup-plugin-babel'// resolve将咱们编写的源码与依赖的第三方库进行合并import resolve from 'rollup-plugin-node-resolve'// postcss解决css文件import postcss from 'rollup-plugin-postcss'export default {  input: "src/Loading.jsx",  // 打包一份cjs和一份es的文件  output: [    {      file: "dist/loading.es.js",      format: "es",      globals: {        react: 'React',      },    }, {      file: 'dist/loading.cjs',      format: "cjs",      globals: {        react: 'React',      },    },  ],  external: ['react'],  plugins: [    postcss(      { extensions: ['.css'] }    ),    babel({      exclude: "node_modules/**",      runtimeHelpers: true,    }),    commonjs(),    resolve(),  ],}

发包到npm

发包到npm只须要几个命令。

npm pack

对我的项目打包后，命令行输入压缩包的详细信息。

更新版本

npm version [<newversion> | major | minor | patch | premajor | preminor | prepatch | prerelease [--preid=<prerelease-id>] | from-git]

依据本次改变的大小抉择不同的命令。

最初应用发布命令。

npm publish

而后就会收到邮件，你的包曾经公布胜利。