前言
最近公司使用了自己开发的 npm 包,然后引入到 react + webpack 的项目中。然后发现同一个项目,在 Mac 系统下能跑吗,但是在 windows 下会报错(npm包无法被loader解析)。于是开始排查问题
原因一:可能是版本问题?
首先,webpack 的配置如下:
// 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'),
//...其他配置
},
// 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')
拿去用不就可以了吗
然后一顿操作:
//paths.js
module.exports = {
appSrc: resolveApp('src'),
appYuntiPrivate: resolveApp('node_modules/@yunti-private'),
//...
}
// webpack.config.js
const paths = require('./paths');
//...
{
test: /\.(js|mjs|jsx|ts|tsx)$/,
include: [paths.appSrc, paths.appYuntiPrivate],
loader: require.resolve('babel-loader'),
//...其他配置
},
然后再运行,他妈的解决了
结尾
断断续续花了好几天,怎么不去死啊你
原文链接:https://juejin.cn/post/7356240651039784975 作者:Jolyne_