vuecli工程构建时识别 node_modules 依赖中 @/ 等别名路径

前言

问题

最近有个需求，需要将不编译的源码上传到npm私服供人使用；但是不编译的源码在原项目中配置了@/等别名，当在使用此源码node依赖的项目里编译运行时，会报找不到依赖中的用别名引用的模块的错:

Module not found: Error: Can't resolve '@/common/xxxx/xxx' in 'xxx/Desktop/program/xxx/node_modules/[依赖包名]/.../xxx'

环境信息

vue-cli5

踩的坑（无效方法）

先来讲一下尝试的各种无效的办法

1、配置别名--vue.config.js 

在vue.config.js添加别名配置，为了不影响当前工程中的依赖关系，所以我把别名多加了一级目录比如@/common：

  chainWebpack: config => {
    config.resolve.alias
        .set('@/common',path.resolve('node_modules/[包名]/xxx/common'));
    },


//或者是

 chainWebpack: config => {
    config.resolve.alias
        .set('@/common',path.resolve(__dirname+'/node_modules/[包名]/xxx/common'));
    },

运行还是报同样的错，说明未生效，看来这里的配置别名不适用node_modules中的依赖

2、配置别名--package.json

在要发布的源码包的工程里的package.json配置别名：

同样无效

3、使用node脚本在构建不编译代码包时读写文件，修改别名为可以识别的相对路径，但是工程中的@/ 别名使用得很广泛，读写文件需要识别的字符位置不同，遂放弃。

有效方法

思考：vuecli配置别名排除了node_modules目录，那么什么可以针对node_modules中的东西去相关的处理，我想到了babel，于是在babel的众多插件里发现了babel-plugin-root-import

具体操作：

step1 安装依赖执行

npm install --dev babel-plugin-root-import

step2 添加babel配置

在babel.config.js 增加以下配置

plugins: [
    [
      "babel-plugin-root-import",
      {
        rootPathPrefix: "@/common",
        rootPathSuffix: "node_modules/[包名]/xxx/common",
      },
    ],
  ],

做了以上操作之后，代码运行成功

另：如果需要配置多组别名，那么可以这样

plugins: [
    [
      "babel-plugin-root-import",
          {paths:
        [{
          rootPathPrefix: "@/common",
          rootPathSuffix: "node_modules/[包名]/xxx/common",
        },
        {
          rootPathPrefix: "@/components",
          rootPathSuffix: "node_modules/[包名]/xxx/components",
        }
      ]}
    ],
  ],

更多babel-plugin-root-import的信息可以去官网看看