使用 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 分包加载。

就酱！