webpack如何打包一個按需引入的vue元件庫

2022-02-11 16:00:32

前言

在公司裡一般有多個相同技術棧的專案，畢竟在多個專案間copy公共元件程式碼太繁瑣，也不利於元件庫的維護，所以怎麼高效維護一套公共的元件程式碼很重要。這種情況，一般我們可以考慮封裝成元件庫，釋出到npm上。在每個專案裡只需要npm install xxx 即可使用，避免了在專案間相互copy。我們這就開始使用webpack打包一個公共的vue元件庫。

在專案中使用vue元件庫的一般姿勢

1、通過import引入，並在入口檔案main.js裡使用Vue.use方法完成元件的全域性註冊，便可在任何單檔案元件中直接使用。如下

import Vue from "vue"
import App from "./App.vue"
import mylib from "mylib"
Vue.use(mylib)
new Vue({
  render: h => h(App)
}).$mount("#app");

2、上面的方式看似是一勞永逸，可隨著元件庫越發的壯大，會出現我引入了整個元件庫程式碼，但我在目前的專案裡只使用了其中一小部分元件，但在專案最終打包的時候卻把元件庫裡所有的元件程式碼都打包進了bundle檔案裡，影響了最終程式碼體積，這明顯是不合理的。所以便有了按需引入元件庫的方式，這裡我們參考element-ui的按需引入方式，如下。

接下來，如果你只希望引入部分元件，比如 Button 和 Select，那麼需要在 main.js 中寫入以下內容：

import Vue from 'vue'; 
import { Button, Select } from 'element-ui'; 
import App from './App.vue'; 
Vue.component(Button.name, Button); 
Vue.component(Select.name, Select);  
new Vue({
    el: '#app', 
    render: h => h(App) 
});

為什麼這樣具名匯入元件就可以做到按需引入呢？其實是babel-plugin-component外掛幫我們完成了轉換的工作。在babel-plugin-component內部會把

import { Button, Select } from 'element-ui';

轉換成

var button = require('element-ui/lib/button')
var select = require('element-ui/lib/select')
require('element-ui/lib/theme-chalk/button/style.css')
require('element-ui/lib/theme-chalk/select/style.css')

上面的element-ui是元件庫名，theme-chalk是元件庫樣式所在的資料夾名，都是可以設定的。button、select是元件名，lib是babel-plugin-component外掛預設尋找元件的資料夾。

webpack實現可按需引入的元件庫

先npm init建立專案，因為是每個元件單獨打包，所以每個元件都匯出一個函數，再Vue.use()的時候執行這個函數，完成元件的全域性註冊。專案目錄結構如下

components/navbar/navbar.vue
<template>
  <div class="header__all">{{text}}</div>
</template>
<script>
export default {
  name: "navbar",
  props: {
    text: String
  }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.header__all{
    background-color: #000000;
    color: #FFFFFF;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    width: 100%;
}
</style>

components/navbar/index.js
import navbar from "./navbar.vue";
export default function(Vue) {
    Vue.component(navbar.name,navbar);
}

src/index.js
import navbar from "./components/navbar"
function install(Vue){
  Vue.use(navbar)
}
if(window && window.Vue) {
  Vue.use(install)
}
export default install

接下來就是使用webpack打包

第一步：先安裝所有需要用到的依賴

npm i -D webpack webpack-cli babel-loader @babel/core @babel/preset-env babel-plugin-component clean-webpack-plugin css-loader mini-css-extract-plugin node-sass postcss postcss-loader autoprefixer cssnano sass-loader terser-webpack-plugin vue-loader vue-template-compiler

第二步：設定webpack.config.js

const path = require('path')
const TerserPlugin = require("terser-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin")
const { VueLoaderPlugin } = require('vue-loader')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
  mode: 'none',
  entry: {
    'navbar': './src/components/navbar/index.js',
    'navbar.min': './src/components/navbar/index.js',
    'test-lib': './src/index.js',
    'test-lib.min': './src/index.js'
    
  },
  output: {
    path: path.join(__dirname,"/lib"),
    filename: '[name].js',
    libraryTarget: 'umd',
    library: '[name]',
    libraryExport: 'default'
  },
//   externals:[],
  optimization: {
    minimize: true,
    minimizer: [
        new TerserPlugin({
            test: /.min.js$/,
        }),
    ],
  },
  module: {
    rules: [
      {
        test: /.vue$/,
        use:  ['vue-loader']
      },
      {
        test: /.css$/,
        use:  [MiniCssExtractPlugin.loader,'css-loader','postcss-loader']
      },
      {
          test: /.s[ac]ss$/i,
          use:  [MiniCssExtractPlugin.loader,'css-loader','postcss-loader','sass-loader']
      },
      {
        test: /.js$/,
        exclude: /node_modules/,
        use:{
            loader: 'babel-loader',
            options: {
                cacheDirectory: true
            }
        }
        
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin(),
    new CleanWebpackPlugin(),
    new MiniCssExtractPlugin({
        filename: 'lib-style/[name].css'
    })
  ]
}

第三步：更改package.json的main欄位，並往scripts裡新增打包命令

"main": "./lib/test-lib.min.js",
"scripts": {
    "build": "webpack --config webpack.config.js"
}

第四步：執行 npm run build 打包元件庫，成功後專案多了個lib資料夾，存放打包後元件庫的程式碼。lib資料夾裡每個檔案都有一個對應的.min檔案，.min檔案分別用terser-webpack-plugin外掛和cssnano壓縮。

偵錯元件庫

有兩種方式可偵錯原生的元件庫

新建test.html，然後以
vuecli新建個測試專案，然後通過npm link的方式連結到測試專案中去使用

這裡展示就使用最粗暴的方式一，新建test.html，npm link各位看官老爺可以自己去嘗試下。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./lib/lib-style/test-lib.min.css" rel="external nofollow" >
</head>
<body>
    <div id="app">
        <navbar text="header"></navbar>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="./lib/test-lib.min.js"></script>
<script>
    new Vue({
        el: '#app'
    })
</script>
</html>

測試結果：

到這一步，至少說明程式碼構建沒什麼大問題，但按需引入功能還沒驗收，接下來我們就繼續把元件庫釋出到npm上，完全效仿element-ui的使用方式在vuecli專案中使用，看看實現的效果如何。

npm 釋出

步驟非常簡單，只需4步

在npm官網註冊賬號並驗證郵箱。
在命令列中輸入 npm login 完成登入。
如果npm使用的是淘寶映象源，需要切回npm源。
進入需要釋出的專案目錄執行npm publish 釋出。

完成後，接著就在測試專案裡 npm install 安裝我們自己的元件庫。

偵錯元件庫按需引入

在測試專案裡的babel.config.js，新增babel-plugin-component設定，並重啟專案。
babel-plugin-component基本設定參考

// babel.config.js
module.exports = {
  presets: ["@vue/cli-plugin-babel/preset"],
  plugins: [
    [
      'component',
      {
        libraryName: 'element-ui',
        styleLibraryName: 'theme-chalk'
      },
      'element-ui'
    ],
    [
      'component',
      {
        libraryName: 'test-lib',
        styleLibrary: {
          "name": "lib-style", // same with styleLibraryName
          "base": false  // if theme package has a base.css
        }
      },
      'test-lib'
    ],
  ]
};

在test.vue中使用元件庫

<template>
<div>
  <navbar :text="msg"></navbar>
  <el-button type="primary" class="dg-margin-t-20">element-button</el-button>
</div>
</template>
<script>
import Vue from "vue";
import { navbar } from "juejintest-lib";
import { button } from "element-ui";
Vue.use(navbar)
Vue.use(button)
export default {
  data:function() {
      return {
          msg: 'text'
      }
  }
};
</script>
<style lang="scss">
.dg-margin-t-20{
    margin-top:20px;
}
</style>