用 Rollup 來開發 Vue 套件是個可以有效減少檔案大小的一種方式。之前寫過 [指南] 用 Vue-SFC-Rollup 在 NPM 發佈你的第一個 Vue 套件 這篇，不過當時是撰寫 Vue 3 版本的。這篇改用 Vue 2 來寫個下拉選單，並筆記一下遇到的困難點。
發佈前打包測試
可以先行使用 npm pack，得到打包後的檔案，並在另一個專案中進行測試。若你輸出的檔案路徑在 C:/Users/user/Desktop，那麼你的安裝路徑就是：npm i -D /c/users/user/desktop/<demo File>
心得
1. scope css / scss 會造成其他專案要修改樣式上的困難
因為 scope 會加上一串流水號於 html / css 上，而這流水號在與其他 Vue 專案合用時，是沒有辦法被專案增加到的。舉例來說：若你在套件壓縮發布時，加上了 data-xxaabb 。而其他專案在 scope 環境下，也會產生自己的 data-ccssdd。這樣一來，你的套件樣式就沒辦法被其他開發者輕易修改到。
2. sfc-Rollup 的基礎設定需要多點設定
如下範例，要加入 baseConfig.vue.css = false 和搭配 postCSSUrl 使用，才能正常使用 import scss 和輸出單一的 css 檔案。其中 url: ‘inline’ 是為了讓圖片可以變成 data:64 格式。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
/*For scss compiling*/ import autoprefixer from 'autoprefixer' import postCSS from 'postcss' import rollupPluginScss from 'rollup-plugin-scss' import postCSSUrl from 'postcss-url' const baseConfig = { input: 'src/entry.ts', plugins: { preVue: [ alias({ entries: [ { find: '@', replacement: `${path.resolve(projectRoot, 'src')}`, }, ], customResolver: resolve({ extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue'], }), }), ], replace: { 'process.env.NODE_ENV': JSON.stringify('production'), }, vue: { css: false, template: { isProduction: true } }, postVue: [ rollupPluginScss({ processor: css => postCSS([autoprefixer]) .use(postCSSUrl({ url: 'inline' })) .process(css, { from: 'src/stylesheet/index.css', to: 'dist/index.css' }) .then(result => result.css), output: 'dist/vue-multi-select.css' }) ], babel: { exclude: 'node_modules/**', extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue'], babelHelpers: 'bundled', }, }, } |
Github
Github：Vue-Multi-Select
按讚加入粉絲團
