npm升级pnpm

  1. 安装pnpm

  2. pnpm import 生成 pnpm-lock.json文件 该命令可以生成和yarn.lock一样的依赖版本

  3. 删除yarn.lock文件

  4. 项目中package.json使用的npm命令替换为pnpm

  5. rm -rf ./node_modules

  6. pnpm instal
    报错找不到sfx2模块下引用的loader 原因是sfx2引用的模块路径是写死的,但是npm升级pnpm后,模块的位置已经改变,导致找不到模块
    这里因为我项目使用的是sfx脚手架,所以会报错,如果使用的是webpack的话应该没有这个问题,就不用往下看了

  7. 找到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'))
 }
};
Logo

前往低代码交流专区

更多推荐