前言

最近公司使用了自己开发的 npm 包，然后引入到 react + webpack 的项目中。然后发现同一个项目，在 Mac 系统下能跑吗，但是在 windows 下会报错（npm包无法被loader解析）。于是开始排查问题

原因一：可能是版本问题？

首先，webpack 的配置如下：

js 复制代码

// webpack.config.js
const paths = require('./paths');

//...

{
  test: /\.(js|mjs|jsx|ts|tsx)$/,
  include: [paths.appSrc, /node_modules/@yunti-private[^/]*/],
  loader: require.resolve('babel-loader'),
  //...其他配置
},

js 复制代码

// paths.js
const path = require('path');
const fs = require('fs');

//...

const appDirectory = fs.realpathSync(process.cwd());
const resolveApp = relativePath => path.resolve(appDirectory, relativePath);

//...

module.exports = {
  appSrc: resolveApp('src')
}

也就是用 babel-loader 去解析 src 目录以及 node_modules/@yunti-private 这个包。

mac 可以，但 windows 不行。于是想到了会不会是 babel-loader 的版本问题

然后一看 package.json，webpack 是 4.42.0，babel-loader 是 8.1.0，对照官网一看，没啥问题，就很抓马

原因二：是不是第三方包 TS 语法太新了？

结果去公司的 npm 包代码看了好久好久好久，也没觉得语法有什么问题，想死

原因三：路径有问题？

突然想到以前看过一篇文章，windows 和 mac 对路径的解析，也就是 / \ 好像是不同的

于是想着去改写 include 里面的路径

然后一看有封装了 paths.js 里面的方法 resolveApp，那我直接暴露一个 resolveApp('node_modules/@yunti-private') 拿去用不就可以了吗

然后一顿操作：

js 复制代码

//paths.js

module.exports = {
  appSrc: resolveApp('src'),
  appYuntiPrivate: resolveApp('node_modules/@yunti-private'),
  //...
}

js 复制代码

// webpack.config.js
const paths = require('./paths');

//...

{
  test: /\.(js|mjs|jsx|ts|tsx)$/,
  include: [paths.appSrc, paths.appYuntiPrivate],
  loader: require.resolve('babel-loader'),
  //...其他配置
},

然后再运行，他妈的解决了

结尾

断断续续花了好几天，怎么不去死啊你