使用rollup | vue cli3(Webpack) 搭建屬於本身的組件庫,(按需加載,多入口打包...)

項目說明

項目github地址

最近準備抽離一些組件,因此就動手搭建了一個基礎打包項目,該有的功能基本都有,功能以下:

按需引入:

支持使用babel-plugin-import插件按需引入,同時項目也支持多入口打包,能夠單獨引入某個入口打包文件,達到按需引入的目的.

多種方式打包:

支持rollup和vue cli3兩種方式打包成庫文件,rollup支持多種格式打包,只須要執行不一樣的npm命令便可

組件測試及demo文檔

保留vue cli3當作example示例啓動架子,支持vuepress文檔,採用類是element-ui文檔風格的組件展現.使用jest當作項目測試工具

其餘一些配置

內置了eslint,styleline,commitlint,prettier,conventional等多個插件來規範代碼,保證代碼質量

項目目錄:

如何建立屬於組件庫或者依賴庫

第一步 獲取代碼

拉取項目代碼 github.com/anncwb/lib-…到本地 一些目錄說明

.
├── build
│   ├── cli.build.js // vue cli3打包配置
│   ├── rollup.build.js // rollup打包配置
│   ├── rollup.createConfig.js 
│   └── utils.js 
├── config
│   └── rollup.build.config.js // rollup打包類型配置
├── docs // 開發文檔
├── examples // 開發示例
├── lib // 打包後的文件
│   └── theme 打包後的css文件
├── packages // 子模塊
├── src 
│   ├── index.js  // 主入口
│   └── lib-list.js // 模塊打包配置
├── tests // 測試文件
├── types // 類型定義文件

複製代碼

第二步 編寫組件

在package下面新建組件或者js庫,這裏使用的是vue來作測試例子,組件編寫須要提供js文件以下index.js

編寫統一的入口文件

在src下面建立index.js文件,將全部組件引入,並導出

開始打包

打包前須要本身編寫一個打包入口文件,用於多入口打包,沒作成自動獲取,本身動手寫把, 在 src下面新建 lib-list.js文件,文件名必須一致且不能使用es6語法導出 lib-list.js:

module.exports = {
  index: {
    input: 'src/index.js',
    output: 'index'
  },
  'file-handle': {
    input: 'packages/file-handle/index.js',
    output: 'file-handle'
  },
  'test-module': {
    input: 'packages/test-module/index.js',
    output: 'test-module'
  }
}

複製代碼

lib-list.js說明

input: 你須要打包的入口,這裏須要使用js,因此package的組件必須提供js入口文件

output: 打包後的組件名,打包後會在lib目錄下生成對應的文件

打包

rollup打包

若是項目偏向於庫文件, 建議使用rollup打包

執行npm run lib便可,

使用vue cli3(webpack)打包

若是項目偏向於UI庫,包含比較多的靜態文件, 建議使用這種方式打包 執行npm run lib:cli便可

完成後會顯示打包成功字樣就能夠了,同時會生成lib目錄,就是你到包後的文件,

同時兩種打包方式,默認輸出的lib文件名會如出一轍,方便切換,固然,你也能夠自行更改

發佈到npm

這裏就再也不說如何發佈到npm了,你們自行百度,注意將package.json的main指向lib/index.js便可

如何實現按需加載

方式一

使用 babel-plugin-import實現按需加載

1. 在項目中引入你本身發佈到npm上面的庫

yarn add xxx 
我這裏是
yarn add vue-lib-starter 
複製代碼

2. 安裝 babel-plugin-import

yarn add  babel-plugin-import -D
複製代碼

3. 配置babel.config.js

module.exports = {
  ....
  plugins:[
    [  'import',
      {
      // 組件庫的名字,能夠根據你發佈的庫的package.json的name自行更改
        libraryName: 'vue-lib-starter',
        
        // 默認打包是lib,不用更改
        libraryDirectory: 'lib',
        
        // 若是有樣式文件,由於打包後樣式統一放在/lib/theme下,因此須要稍微轉換下
        style: (name, file) => {
          const libDirIndex = name.lastIndexOf('/')
          const libDir = name.substring(0, libDirIndex)
          const fileName = name.substr(libDirIndex + 1)
          return `${libDir}/theme/${fileName}.css`;
        }
      }
    ]
  ]
}
複製代碼

4. 結果(親測有效,能夠自行測試)

import { TestModule } from 'vue-lib-starter'
會轉化成下面:

js:
import TestModule from 'vue-lib-starter/lib/test-module.js'

css:
import 'vue-lib-starter/lib/theme/test-module.css'
複製代碼

方式二

手動按需引入,打包後出了統一的入口文件,還能夠本身打包多個入口,若是有配置,能夠直接引入本身須要的組件:

import TestModule from 'vue-lib-starter/lib/test-module.js'
import 'vue-lib-starter/lib/theme/test-module.css'
複製代碼

這樣便可完成按需引入,兩種方式其實最終效果都同樣

文檔編寫

集成了vuepress做爲文檔編寫工具,具體使用請參考官方文檔

一些注意點

• 項目的eslint和stylelint規則可能跟你的項目,須要自行修改
• 項目默認會對git提交的message進行校驗,請確保你的message個是符合commitline規則,具體能夠查看根目錄下commitlint.config.js
• src下面的lib-list.js必須有,不然會出錯
• npm run lint:prettier 執行會格式化所有js和ts文件,謹慎這行
• npm run lint:css 執行可能會報錯,由於項目的目錄下沒有css文件
• npm run version 生成變動日誌的前提是你要符合上面的commitlint.config.js提交規範

最後

更多的細節能夠自行拉取代碼查看

因爲是時間比較少,就一天左右的時間弄出來的,有些東西可能沒考慮全,你們能夠本身根據本身的需求修改代碼,僅提供個人代碼參考而已