解决Vue-cli 脚手架中npm包别名不生效问题

背景

有时我们自研工具库，发布到自己的私仓上，安装到项目中。但是包名称比较长，想要设置个短名称，却会有问题，本文记录下这个问题的解决方案。

解决方案

解决方案也不难，核心是 webpack 的别名设置以及规避 eslint 的校验。具体步骤如下：

1. 假设我们有包名 my-npm-package，像将其变成 @mnp；首先先在 vue.config.js 中设置 alias:

  chainWebpack: (config) => {
    // 路径别名
    config.resolve.alias
      .set('@', path.resolve('src'))
      .set('@mnp', path.resolve('node_modules/my-npm-package/src'))
      .end();
    return config;
  },

2. 然后让 eslint 忽略到改包的校验，在 .eslintrc.js 配置；

{
    rules: {
        'import/no-unresolved': [
          'error',
          {
            ignore: ['@mnp/utils', '@mnp/*'],
          },
        ],
    }
}

3. 继续解决代码提交的问题，以及执行命令 vue-cli-service lint 时的问题。

   在 eslintrc.js 中rules增加 'import/no-extraneous-dependencies': ['warn', { peerDependencies: false }] 来忽略掉未知名包的校验。建议只加必要的设置，具体参见import/no-extraneous-dependencies: Forbid the use of extraneous packages

4. 若使用Typescript，则需要在 tsconfig.json 中设置：

{
    "paths": {
      "@/*": [
        "src/*"
      ],
      "@mnp/*": [
        "node_modules/my-npm-package/src/*"
      ]
    },
}

总结

本文方法，可以让你将一个普通包，变成拥有 @ 符开头的包，是不是很酷。