search

xccjk / x-blog

学习笔记
17 stars 2 forks source link

npm/yarn/pnpm #87

Open xccjk opened 1 year ago

xccjk commented 1 year ago

怎么发布一个npm包

参考文章

xccjk commented 1 year ago

npm 针对多个源的操作

很多情况下，公司内部会有不同的npm源，或者为了国内安装速度问题，选择淘宝源等... 当想发布npm包时，而源不为npm源时，在npm adduser或者npm login时会报错。

解决方案：将源切换到npm源上

npm config set registry https://registry.npmjs.org

安装nrm可以查看自己当前是在使用哪个源

npm install nrm -g
// 查看所有源与当前源
nrm ls
xccjk commented 1 year ago

npm镜像的常见操作

背景

公司内容搭建了自己的npm仓库，下载内部npm包时，必须通过内部的npm源来安装依赖，否则安装不成功。当个人要发布npm包时，经常需要来回切换npm源，比较麻烦，特此记录一下操作过程

npm与yarn的区别

yarn

本质还是安装的npm上的包，依赖包的仓库不会变，所以安装下来的包没有什么区别

npm

JS包管理平台，但是安装速度不够快，拉取的package包版本可能不一致，同时npm允许安装package时执行代码，存在安全隐患

常见的源

  npm: https://registry.npmjs.org/

  cnpm: https://r.cnpmjs.org/

  taobao: https://registry.npm.taobao.org/

  nj: https://registry.nodejitsu.com/

  rednpm: https://registry.mirror.cqupt.edu.cn/

  npmMirror: https://skimdb.npmjs.com/registry/

  deunpm: http://registry.enpmjs.org/

修改，新增，切换镜像地址

编辑源配置文件

在命令行工具输入npm config edit即可对本机镜像进行查看编辑

  npm config edit

修改镜像

假设修改为淘宝镜像

  // 查看npm当前镜像源
  npm config get registry
  // 设置npm镜像源为淘宝镜像
  npm config set registry https://registry.npm.taobao.org/
  // 查看yarn当前镜像源
  config get registry
  // 设置yarn镜像源为淘宝镜像
  yarn config set registry https://registry.npm.taobao.org/

通过nrm管理镜像

  npm install nrm -g
  nrm ls
  nrm use yarn
  nrm add yarn https://registry.yarnpkg.com/
  nrm del yarn
  nrm test yarn

nrm文档

xccjk commented 1 year ago

npm link 高效的模块调试方式

背景

在很多时候，我们在本地写一个npm模块时，经常会遇到的一个问题：

新开发或者修改的npm模块，怎么在本地测试？

为了方便描述，比如我们要在webpack-xcc这个项目中使用一个npm包npm-link-test

很多人在遇到这个问题时，常见的做法有下面几种：

  1. 发布npm包为测试版本，然后安装到项目中进行调试
  1. 直接使用相对路径进行安装
cd app/webpack-xcc
npm install app/npm-link-test
  1. 使用软链
cd app/webpack-xcc/node_modules
ln -s app/npm-link-test npm-link-test

什么是npm link

npm link是一种把包链接到包文件夹的方式，简单来说，就是可以让你在不发布npm模块的情况下，调试该模块，并且修改模块后会实时生效，不需要通过npm install进行安装

相关文档：https://docs.npmjs.com/cli/v6/commands/npm-link

npm link的使用技巧

npm link
npm link name
npm unlink name
xccjk commented 1 year ago

__dirname is not defined in ES module scope in JS

在es模块中使用__dirname时，会报错

The "__dirname is not defined in ES module scope" error occurs when we try to try to use the __dirname global variable in an ES module file. The __dirname or __filename global variables are not available in ECMAScript module files

解决方案：

import path from 'path';
import {fileURLToPath} from 'url';

const __filename = fileURLToPath(import.meta.url);

const __dirname = path.dirname(__filename);

console.log(path.join(__dirname, 'app'))
xccjk commented 1 year ago

node 格式化输出json

const str = JSON.stringify(data, "", "\t");

或者

const str = JSON.stringify(data, null, "\t");
xccjk commented 1 year ago

动态读取及写入json

读取：

const getPackageJson = (path) => {
  const packageJson = fs.readFileSync(path);
  return JSON.parse(packageJson);
}
packageJson('./package.json');

写入：

const writePackageJson = ({ path, json }) => {
  fs.writeFile(path, JSON.stringify(json, null, '\t'), (err) => {
    if (err) console.log('package.json修改失败: ', err);
    console.log('package.json修改成功!');
  })
}
writePackageJson({ path: './package.json', json: packageJson('./package.json') })
xccjk commented 1 year ago

判断文件夹是否存在

fs.existsSync(path)