npm

创建工具包项目

安装Node

创建项目

创建一个空的项目文件夹: kieron-fe
在文件夹下执行命令 npm init -y

下载依赖包

npm i webpack webpack-cli

配置 webpack

//webpack.config.js
const path = require('path')
module.exports = {
  // 模式
  mode: 'development', // 也可以使用 production
  // 入口
  entry: './src/index.js', 
  // 出口
  output: {
    // 打包文件夹
    path: path.resolve(__dirname, 'dist'),
    // 打包文件
    filename: 'utils.js', 
    // 向外暴露的对象的名称
    library: 'utils',
    // 打包生成库可以通过esm/commonjs/reqirejs的语法引入
    libraryTarget: 'umd', 
  },
}

在入口 JS 中暴露功能

// src/index.js
export function test() {
  document.write('测试自定义包')
  console.log('test()')
}

配置打包命令

// package.json
"scripts": {
  "build:watch": "webpack --watch"
},

对项目进行打包

npm run build:watch

测试使用自定义包

<!-- test/first.html -->
<body>
  <script src="../dist/utils.js"></script>
  <script>
    utils.test()
  </script>
</body>

npm依赖

npm i -S(-save) 下载的依赖包是安装在 dependencies 中，生产和开发环境都会使用。
npm i -D(--save-dev) 下载的依赖包安装在 devDenpendencies 中，只有在开发环境中使用。
npm i -g 是把模块安装到全局，不会在项目的 node 包中保存，也不会将注入 dependencies 和 devDependencies 中。
npm i 的话，是安装在 dependencies 中，也就是说生产和开发都会用到。

发布到 npm 中央仓库

完善 package.json

注意:
name: 必须是唯一的名称(在 npm 在线中央仓库中没有同名的)
main: 必须指定为打包生成的 js 文件
keywords: 指定一些方便别的程序员搜索到当前库的关键字

{
  "name": "kieron.js",
  "version": "1.0.0",
  "author": "",
  "description": "自定义工具函数库",
  "keywords": [
    "utils",
    "array",
    "object",
    "function",
    "string",
    "axios",
    "event-bus",
    "pub-sub",
    "promise"
  ],
  "main": "dist/utils.js",
  "license": "MIT",
  "scripts": {
    "build:watch": "webpack --watch",
    "build": "webpack"
  },
  "devDependencies": {
    "webpack": "^5.10.0",
    "webpack-cli": "^4.2.0"
  }
}

npm配置

npm 配置的中央仓库不能是淘宝镜像
发布前必须执行: npm config set registry https://registry.npmjs.org/
不用发布时: npm config set registry http://registry.npm.taobao.org/
查看配置: npm config list

注册npm中央仓库账号

注册地址: https://www.npmjs.com/
关键信息: 用户名/密码/邮箱(需要验证)

添加用户

执行: npm addUser 或者 npm login
登陆npm仓库
依次指定用户名/密码/邮箱

发布仓库

执行: npm publish
发布失败, 原因是库的名称重复了, 修改 name 为一个唯一值, 再发布

更新代码后再发布

修改项目库的版本号: package.json 中的 version 从1.0.0 改为 1.0.1, 注意一定要变大
修改代码后重新打包: npm run build
执行发布: npm publish

强制删除已发布的库

执行: npm unpublish --force
注意: 必须在72小时内, 否则不能再删除

使用自定义工具包

下载工具包

npm install kieron.js

网页中引入并使用

<script src="./node_modules/kieron.js/dist/utils.js"></script>
<script>
  utils.test()
</script>

模块化引入并使用

// 使用 ESM 引入
import { test } from 'kieron.js'
test()

// 使用 commonjs 引入
const { test } = require('kieron.js')
test()

yarn

安装

npm install -g yarn

查看版本

yarn -v

开始一个新工程

yarn init 与 npm init 一样通过交互式会话创建一个 package.json

yarn init # yarn
 
npm init # npm

跳过会话，直接通过默认值生成 package.json

yarn init --yes # 简写 -y
npm init -y

添加一个依赖

通过 yarn add 添加依赖会更新 package.json 以及 yarn.lock 文件

开发环境
yarn add --dev 依赖会记录在 package.json 的 devDependencies 下开发环境
```
yarn add webpack --dev # yarn 简写 -D
npm install webpack --save-dev # npm
```

生产环境
yarn add 依赖会记录在 package.json 的 dependencies 下生产环境

yarn add webpack@2.3.3 # yarn --save 是 yarn 默认的，默认记录在 package.json 中
npm install webpack@2.3.3 --save # npm

全局
yarn global add 全局安装依赖

yarn global add webpack # yarn
npm install webpack -g # npm

更新一个依赖

yarn upgrade # 升级所有依赖项，不记录在 package.json 中
npm update # npm 可以通过 ‘--save|--save-dev’ 指定升级哪类依赖
 
yarn upgrade webpack # 升级指定包
npm update webpack --save-dev # npm
 
yarn upgrade --latest # 忽略版本规则，升级到最新版本，并且更新 package.json

移除一个依赖

yarn remove

安装 package.json 中的所有文件

yarn 或者 yarn install #在 node_modules 目录安装 package.json 中列出的所有依赖
npm install # npm
# yarn install 安装时，如果 node_modules 中有相应的包则不会重新下载 --force 可以强制

重新下载安装

yarn install --force # 强制下载安装
npm install --force # npm

运行脚本

yarn run 用来执行在 package.json 中 scripts 属性下定义的脚本

// package.json
{
"scripts": {
  "dev": "node app.js",
  "start": "node app.js"
 }
}
yarn run dev # yarn 执行 dev 对应的脚本 node app.js
npm run # npm
yarn start # yarn
npm start # npm
与 npm 一样 可以有 yarn start 和 yarn test 两个简写的运行脚本方式

显示某个包信息

yarn info

列出项目的所有依赖

yarn list # 列出当前项目的依赖
npm list # npm
yarn list --depth=0 # 限制依赖的深度
sudo yarn global list # 列出全局安装的模块

管理 yarn 配置文件

yarn coinfig

yarn config set key value # 设置
npm config set key value

yarn config get key # 读取值
npm config get key

yarn config delete key # 删除
npm config delete key

yarn config list # 显示当前配置
npm config list

yarn config set registry https://registry.npm.taobao.org # 设置淘宝镜像
npm config set registry https://registry.npm.taobao.org # npm

缓存

yarn cache
sudo yarn cache list # 列出已缓存的每个包
sudo yarn cache dir # 返回 全局缓存位置
sudo yarn cache clean # 清除缓存

posted @ 2023-05-19 23:16 提莫一米五呀阅读(71) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· webpack4

· memorandum

· npm、yarn

· 包管理工具

· Nodejs包管理工具

公告

昵称：提莫一米五呀
园龄： 6年3个月
粉丝： 1
关注： 1

+加关注

2025年3月

日

一

二

三

四

五

六

随笔分类

notes(27)

提莫一米五呀

npm