一文教你构建自己的 library 以及 webpack 优化和 npm 版本控制

[Reming960227]

介绍

构建自己的 UI 库，你必须要对一款打包工具熟悉(webpack, gulp 或者 grunt), 本文以 webpack 为例。

github 地址

https://github.com/Reming960227/atom-design

可以点个 star，谢谢! 这套 UI 费了几个月时间和很多心血，现在已经趋于完善，你完全可以在你的生产环境中试着使用。对于性能的考虑，以及 js/css 压缩，按需引入等等都已经很完善。这套 UI 库富含移动端可能碰到的手势组件、弹出组件、懒加载、滚动加载等等...

中文文档地址

https://atom-design.github.io/docs/#/

现在进入正题吧~~~

webpack 配置

首先就是 webpack 配置，我用注释的形式说明

const path = require('path');
const webpack = require('webpack');
// 用于清空之前的打包文件
const CleanWebpackPlugin = require('clean-webpack-plugin');
// 抽取所有的 css 到单一文件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// 压缩 css
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');

module.exports = {
  entry: {
   'xxx': './packages/xxx.js',
   // 或者你可以多入口配置
   'xxx': './packages/xxx.js'
  },
  output: {
    path: path.resolve(__dirname, 'bundle'), // 打包的文件目录
    filename: './[name].js', // 打包文件名, [name]会自己生产 entry 的 key 名，或者你可以用 hash，chunkhash 这都是没问题的
    library: 'libraryName', // 配置库名 
    libraryTarget: 'umd', // 配置输出对象的规范，你可以使用 amd, commonjs, commonjs2，如果要兼容 amd 和 commonjs 则使用 umd
    globalObject: 'this', // 配置库的全局环境, umd 则使用 this
    umdNamedDefine: true // umd 输出是否为 amd 规范命名，默认 false
  },
  externals: { // 如果用到额外的第三方库，为了防止第三方库被打包自己的库，可以使用此字段
    vue: {...},
    react: {...}
  },
  module: {
    rules: [
    {
      test: /\.js$/,
      loader: 'eslint-loader',
      enforce: 'pre',
      exclude: path.resolve(__dirname, '/node_modules')
    },
    {
      test: /\.js$/,
      loader: 'babel-loader',
      exclude: path.resolve(__dirname, '/node_modules')
    },
    {
      test: /\.css$/,
      use: [
        MiniCssExtractPlugin.loader, // 使用 MiniCssExtractPlugin 有个坑， 必须要有 css-loader，而且 sass-loader,postcss-loader 等等要放 css-loader 之后
        'css-loader',
        'postcss-loader'
      ]
    }]
  },
  resolve: {
    extensions: ['.js'] // 配置默认扩展名，你也可以设置.vue,.ts 等等
  },
  plugins: [
    new CleanWebpackPlugin(),
    new MiniCssExtractPlugin({
      filename: 'style.css'
    }),
    // 压缩 css
    new OptimizeCssAssetsPlugin({
      assetNameRegExp: /\.css$/g,
      cssProcessor: require('cssnano'),
      cssProcessorPluginOptions: {
        preset: ['default', { discardComments: { removeAll: true } }],
      },
      canPrint: true
    })
  ]
}

webpack4 的 production 模式会自己使用 uglifyjs-webpack-plugin 来压缩 js，css 需要自己配置压缩。接着配置.babelrc 来使用 babel 插件以及预设

// .babelrc
{
  "presets": [
    [
      "@babel/preset-env", // 转 es5
      {
        "modules": false
      }
    ]
  ],
  "plugins": [...]
  ]
}

npm 发布

到这里你的 webpack 就算配置完了，然后你可以打包自己的库。 接着就是 npm 发布，你可能用的 cnpm，那么你要切回 npm， 然后配置.npmignore 把不需要传到 npm 的过滤掉

// .npmignore
/node_modules/
/文件名 /
/.npmignore
/xxx.js

之后使用 npm publish 发布自己的库, 发布前请确保自己是否有 REAMDE.MD 文件，这个是 npm 要求一定要上传的文件。包名,版本以及其他信息，npm 会从 pacakge.json 里读取。

你可能会想取消发布这时候就使用 npm unpublish 库名 @版本
例：npm unpublish [email protected]
取消发布只有在发布的 24 小时之内有效