一文教你構建本身的library以及webpack優化和npm版本控制

介紹

構建本身的UI庫，你必需要對一款打包工具熟悉(webpack, gulp或者grunt), 本文以webpack爲例。

github地址

github.com/reming0227/…

能夠點個star，謝謝! 這套UI費了幾個月時間和不少心血，如今已經趨於完善，你徹底能夠在你的生產環境中試着使用。對於性能的考慮，以及js/css壓縮，按需引入等等都已經很完善。這套UI庫富含移動端可能碰到的手勢組件、彈出組件、懶加載、滾動加載等等...

中文文檔地址

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 libraryName@1.0.0
取消發佈只有在發佈的24小時以內有效