关于webpack:使用webpack和rollup打包组件库

前言

之前做了一个 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.js
const 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

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