使用 babel-plugin-component 用按需引入的方式加載項目中的文件

babel-plugin-component 是 element-ui 自家用的babel打包工具。

如果你的項目有如下結構

而你又想用下面這種方法引入里面的文件

import { Cell, Group, Confirm, TransferDomDirective as TransferDom } from 'vuxProxy'

 

怎么搞呢？

這是我之前遇到的一個棘手的問題。一個舊的項目里面用到了vux，
但是我打算把項目升級到 vue-cli3，
但是坑爹的是 vux 並不支持，
但是一時間又不可能把項目中所有 vux 換掉，因為實在太大了，
但是 vux 又必須要用他的 vux-loader 加載。

那怎么辦呢？
按照社區提供的方法，把 loader 加上了，如下：

// vue.config.js

module.exports = {
  publicPath: './',
  outputDir: 'dist',
  assetsDir: 'static',
  productionSourceMap: false,
  configureWebpack: config => {
    require('vux-loader').merge(config, {
      options: {},
      plugins: [{name: 'vux-ui'}]
    }) }
}

 

這會兒組件確實加載出來了，但是沒法按需加載，整個 vux 都引進來了。
看了 vux 的入口文件，是這樣的：

看到了吧，他的模塊文件分在不同的文件夾，而且還是沒有打包處理過的。
我目前用的vux和vux-loader分別是這個版本：

    "vux": "^2.2.0",
    "vux-loader": "^1.2.9",

那怎么樣才能讓他按需加載呢？
。
。
。
只能自己分出來了，
一個包一個文件，如下：

// src/vuxProxy/lib/Cell.js

import Cell from 'vux/src/components/cell/index.vue'
export default Cell

就是引入vux的包然后再導出來。


然后所有文件放到 src/vuxProxy/lib下：

下面就說下怎么用 import 來按需引入這堆組件吧。

首先，安裝餓了么團隊的 babel-plugin-component

npm i babel-plugin-component -D

 

再定義babel配置信息：

// babel.config.js

module.exports = {
  presets: [
    '@vue/app'
  ],
  plugins: [
    [
      "component",
      {
        "libraryName": "vuxProxy",
        "style": false,
        "camel2Dash": false
      },
      'vuxProxy' ]
  ]
}

 

這里由於我們不需要加載css，也不需要駝峰轉換成-，所以兩個都是false，只需要寫包名即可。
。
。
。
這么搞肯定不行，肯會會報 vuxProxy 這個包不存在，沒有安裝。
這時候我們要改下 webpack 的 resolve.alias ，把 vuxProxy 的路徑指到 src/vuxProxy 下面來就可以了。

由於 configureWebpack 已經被 vux-loader 占用了，不好改，所以只能在 chainWebpack 里加配置信息了，
先安裝 webpack-chain：

npm i webpack-chain@5.2.4 --save-dev

配置如下：

// vue.config.js

module.exports = {
  publicPath: './',
  outputDir: 'dist',
  assetsDir: 'static',
  productionSourceMap: false,
  configureWebpack: config => {
    require('vux-loader').merge(config, {
      options: {},
      plugins: [{name: 'vux-ui'}]
    })
  },
 chainWebpack: config => {
    config.resolve.alias.set('vuxProxy', path.resolve('src/vuxProxy')) }
}

 

如此，便大功告成，vux 在 vue-cli3 下也可以正常工作了。

核心點就是通過修改 webpack 的 alias，添加解析路徑，再用 babel-plugin-component 分包加載。

就醬！