NPM 文档

最新推荐文章于 2024-09-14 08:06:03 发布

魅影奇兵

最新推荐文章于 2024-09-14 08:06:03 发布

阅读量744

点赞数

文章标签： npm webpack 前端

本文链接：https://blog.csdn.net/u014666376/article/details/127173519

版权

npm与yarn

官网 : https://www.npmjs.com/

node_modules : npm 安装目录, git/svn 可以省略目录
bin : 存放二进制文件
lib : 存放js代码
doc : 文档

npm 使用

常用命令

npm -v # 查看版本
npm list # 目录下已装包
npm list -g	# 全局包
npm info 包 # 查看包信息, 本地和远程包的情况
npm install -g npm@latest # 安装/升级 npm -g(全局安装) @latest(最新) @版本号, npm版本和node版本有关
npm i -g npm # i(install)缩写, 安装命令
npm i -D webpack # -D(--save-dev)缩写,装到 devDependencies(开发环境), 仅开发阶段使用
npm i -S jquery # -S(--save)缩写, 装到 dependencies(生产环境), 缺省下默认
npm uninstall # 卸载包
npm r 包 # r(uninstall)卸载包


npm run abc # 执行命令

npm init # 创建 package.json 文件
npm init -y # -y(--yes)缩写, 跳过回答问题步骤, 直接创建 package.json 文件

npm set init.author.name "xxx"
npm set init.author.email "xxx@qq.com" # 设置默认值
npm set init.license "MIT"

# 升级 以连接形式安装
npm update ../../../study/js_music/osmd-extended-master --install-links

npm config get cache # 查看缓存目录
npm cache clean --force # 清空缓存目录。npm@5 起，保证缓存数据有效性和完整性，加 --force
npm cache verify # 验证缓存数据有效性和完整性，清理垃圾数据
npm i --prefer-offline xxx # 离线优先, 优先本地缓存安装
npm i --prefer-online xxx # 网络优先, 优先联网安装
npm i --offline xxx # 完全离线模式，不存在报错

npm adduser # 创建NPM账号，密码和邮箱，将提示创建成功
npm login # 登录NPM账号，密码和邮箱
npm publish 包名 # 输入以下命令进行发布, 或更新
npm unpublish --force 包名 # 从npm上面卸载自己发布的包

yarn cache ls # 列出当前缓存的包列表
yarn cache dir # 显示缓存数据的目录
yarn cache clean # 清除所有缓存数据

淘宝镜像

淘宝镜像(10分钟/次) : https://npm.taobao.org

npm install -g cnpm --registry=https://registry.npm.taobao.org

使用

// CommonJs
var name = require()

exports=对象,暴露后会包一层对象
module.exports=对象,这个暴露方式,先导入直接引入
exports.get=function(){} 这个暴露直接在引入后使用

package.json

{
    "name": "my-package 包名, 在npm中搜索全靠它",
    "version": "0.0.0 版本, 每次发布必须增加，版本不能重复",
    "description": "描述",
    "scripts": {
        "dev": "",
        "build": "",
        "build:typings": "node ./build/build.typings.js",
        "build:dev": "webpack --mode=development --progress",
        "watch": "webpack --mode=development --watch --progress",
        "test:pack": "npx npm-packlist"
    },
    "author": {
        "name": "作者",
        "email": "@qq.com"
    },
    "contributors": "其他贡献者",
    "homepage": "https://github.com/",
    "repository": {
        "type": "git",
        "url": "git+https://github.com/xxxx.git 源码地址",
        "directory": "packages/compiler-dom 在git下的目录"
    },
    "license": "MIT 版权信息, ISC ",
    "main": "dist/my-package.min.js 包加载时的入口文件",
    "typings": "dist/my-package.min.d.ts",
    "private": false, // 是否私有, true:只有自己能用
    // 暴露的文件夹, 哪些文件夹提交到npm 格式为
    "files": [
        "dist/*",
        "build/vendor.d.ts",
        "CHANGELOG*",
        "README*"
    ],
    // 副作用
    "sideEffects": [
        "就是代码对什么什么的影响",
    ],
    "keywords": [
        "key1",
        "key2"
    ], // npm包搜索关键字
    "dependencies": {}, // 生产依赖
    "devDependencies": {
        // 开发依赖
        "jquery": "^3.6.0", // ^ : 第一位版本号(3)不变,后面两位取最新
        "jszip": "~3.7.1", // ~ : 前两位(3.7)不变,最后一位取最新
        "typescript": "*4.3.2" // * : 全部取最新的
    },
    "peerDependencies": {} // 代表着当前npm包依赖下面这几种环境
}

多版本共存nvm

管理nodejs版本的工具

官网 : https://github.com/coreybutler/nvm-windows

nvm list # 查看已安装的nodejs版本
nvm on # 启用 nvm
nvm off # 禁用 nvm (不卸载任何东西)
nvm install 版本号 # 安装node.js的命名 version是版本号 如：nvm install 8.12.0
nvm use 版本号 # 选择特定版本 version 的 nodejs
nvm uninstall 版本号 # 卸载指定版本的nodejs

npm 发布

eslint

代码风格一致，多人开发减少不必要的沟通，预防编写错误，例如：未声明变量，重复引入等

npm i -D eslint

创建配置文件 .eslintrc.[文件类型]

eslint 的配置方式可以通过package.json 或 独立的配置文件，具体参考eslint文档touch .eslintrc.yml

env: // 支持es6全局变量
  es6: true
  browser: true
extends: eslint:recommended // 使用eslint 默认规则
parserOptions:  
  ecmaVersion: 2019  // 支持es6语法校验
  sourceType: module // 使用es6模块语法
rules:  // 自定义规则配置
  indent: 
    - error
    - 2

babel

https://www.babeljs.cn/

为了支持ES6语法，需要引入babel作为转换
npm i -D @babel/core @babel/preset-env  @babel/plugin-transform-runtime

创建配置

touch .babelrc
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "modules": false,
        "useBuiltIns": "usage",
        "corejs": "2.6.10"
      }
    ]
  ],
  "plugins": [
      ["@babel/plugin-transform-runtime"]
  ],
  "ignore": [
      "node_modules/**"
    ]
}

rollup.js

https://www.rollupjs.com/

因为我们使用了ES6，且希望包能在多个环境下运行。所以我们需要使用到打包工具

应用使用 webpack，对于类库使用 Rollup

npm i -D rollup
# 安装 rollup 插件
npm i -D rollup-plugin-node-resolve  rollup-plugin-commonjs rollup-plugin-babel rollup-plugin-eslint

创建 rollup.config.js 配置文件

touch rollup.config.js
import resolve from 'rollup-plugin-node-resolve'; // 依赖引用插件
import commonjs from 'rollup-plugin-commonjs'; // commonjs模块转换插件
import babel from "rollup-plugin-babel"; // babel 插件
import { eslint } from 'rollup-plugin-eslint'; // eslint插件

export default {
  input: './src/main.js', // 打包的入口文件
  output:{
    name: 'my-pkg',  // 输入的包名
    file: './bin/index.js', // 打包输出地址, 这里的导出地址就是package内main的地址
    format: 'umd' // 包类型
  },
  plugins: [  // 使用的插件
    resolve(),
    commonjs(),
    babel({
      exclude: 'node_modules/**',
      runtimeHelpers: true,
    }),
    eslint({ 
      throwOnError: true,
      include: ['src/**'],
      exclude: ['node_modules/**']
    })
  ],
  ignore: [
    "node_modules/**" // 忽略目录
  ]
}

如果需要多文件合并到同一文件，可以使用相关的rollup插件包,

这里导出的配置也可以为配置数组，表示多个打包配置。可以同时处理多文件多输入的情况

添加打包命令

// package.json
{
    ....
    "script": {
       // 指定rollup运行的配置文件，并监听文件修改。
       "dev": "rollup -c rollup.config.js -w",
       "build": "rollup -c rollup.config.js",
    }
    // -c 执行配置文件
    // -w 监听文件修改，当文件修改后将重新打包
}

编写源码

// 写入源码
// src/main.js

export function call(){
    console.log('copy-left !!!')
}

调试

通过 npm link 将本地包注册到全局。我们可以在其他包内引用我们自己的包.

创建test目录

md test
touch test/index.js

全局注册包

// 在包根目录下  /pkg
npm link

引入本地包

// test 目录下
npm link my-pkg

编写调试

// /test/index.js 
const myPkg = require('my-pkg')
myPkg.call()

包(Package)和模块(Module)

一个文件夹包含应用程序，使用package.json来描述它(a)
一个用gzip压缩的文件夹，满足(a)定义(b)
一个url可以获取(b)描述的压缩包©
一个@描述的一个包已经被发布到npm仓库 (d)
一个@描述的包同(e)
一个描述的包，并且具有latest标签，满足(e) (f)
一个git url 可以被克隆，满足(a) 定义