npm升级pnpm
使用vue sfx脚手架或者webpack脚手架 npm如何升级npm
npm升级pnpm
-
安装pnpm
-
pnpm import 生成 pnpm-lock.json文件 该命令可以生成和yarn.lock一样的依赖版本
-
删除yarn.lock文件
-
项目中package.json使用的npm命令替换为pnpm
-
rm -rf ./node_modules
-
pnpm instal
报错找不到sfx2模块下引用的loader 原因是sfx2引用的模块路径是写死的,但是npm升级pnpm后,模块的位置已经改变,导致找不到模块
这里因为我项目使用的是sfx脚手架,所以会报错,如果使用的是webpack的话应该没有这个问题,就不用往下看了 -
找到sfx2下loader.js文件也就是 加载模块的入口文件
尝试修改加载模块的路径,重新install dev项目就能够跑起来了
如何修改node_modules里面的代码,让其下次install的时候生效
创建补丁文件
1.在pathch目录下创建sfx2_loader文件,在这里修改
let path = require('path');
let fs = require('fs');
const PROJECT_ROOT = process.cwd();
function normalizeLoader (loaderName, isFirstBySFX = false) {
let retFirst = null;
let retSecond = null;
if (isFirstBySFX) {
retFirst = path.resolve(__dirname, `../../../${loaderName}`);
retSecond = path.resolve(PROJECT_ROOT, `../../../${loaderName}`);
} else {
retFirst = path.resolve(PROJECT_ROOT, `../../../${loaderName}`);
retSecond = path.resolve(__dirname, `../../../${loaderName}`);
}
if (fs.existsSync(retFirst)) {
return retFirst;
}
if (fs.existsSync(retSecond)) {
return retSecond;
}
throw new Error(`
can not find loader: [${retSecond}]
`);
}
exports.normalizeLoader = normalizeLoader;
2.根目录下新建postinstall.js文件 将更改bug的文件替换node_modules里的文件
copyFileSync('./patches/sfx2_loader.js', './node_modules/@sxf/sfx2/util/loader.js');
function copyFileSync(source, target) {
var targetFile = target;
var fs = require("fs")
if (fs.existsSync(target)) {
if (fs.lstatSync(target).isDirectory()) {
targetFile = path.join(target, path.basename(source));
}
}
fs.writeFileSync(targetFile, fs.readFileSync(source));
}
3.在package.json script 里面 加入多一条命令,在install的之候会执行该命令
“postinstall”: “node postinstall.js”,
patch-package
1.npm install patch-package -D
2.“postinstall”: “patch-packag”
3.npx patch-package “package-name”
4.此时生成 patches 目录,里面的文件就显示了改动的diff文件
缺点:针对于当前依赖的具体某个版本的模块进行修改的,如果后期升级了模块,那么也就不起作用了
webpack alias
一般用来配置路径别名,但是也可以用来将node_modules里面的文件替换为我们自己的文件
const path = require('path');
module.exports = {
chainWebpack: config => {
config.resolve.alias
.set('xxx', path.resolve(__dirname, 'pathch/loader.js'))
}
};
更多推荐
所有评论(0)