关于npm包在Mac系统能解析而在windows不能被解析

前言

最近公司使用了自己开发的 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'),
  //...其他配置
},

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

结尾

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

相关推荐
牧羊狼的狼1 小时前
React 中的 HOC 和 Hooks
前端·javascript·react.js·hooks·高阶组件·hoc
知识分享小能手3 小时前
React学习教程,从入门到精通, React 属性(Props)语法知识点与案例详解(14)
前端·javascript·vue.js·学习·react.js·vue·react
魔云连洲3 小时前
深入解析:Vue与React的异步批处理更新机制
前端·vue.js·react.js
mCell3 小时前
JavaScript 的多线程能力:Worker
前端·javascript·浏览器
超级无敌攻城狮5 小时前
3 分钟学会!波浪文字动画超详细教程,从 0 到 1 实现「思考中 / 加载中」高级效果
前端
excel5 小时前
用 TensorFlow.js Node 实现猫图像识别(教学版逐步分解)
前端
gnip6 小时前
JavaScript事件流
前端·javascript
赵得C6 小时前
【前端技巧】Element Table 列标题如何优雅添加 Tooltip 提示?
前端·elementui·vue·table组件
wow_DG6 小时前
【Vue2 ✨】Vue2 入门之旅 · 进阶篇(一):响应式原理
前端·javascript·vue.js
weixin_456904276 小时前
UserManagement.vue和Profile.vue详细解释
前端·javascript·vue.js