导航菜单

  • 0.api
  • 0.Async
  • 0.module
  • 1.ES2015
  • 2.Promise
  • 3.Node
  • 4.NodeInstall
  • 5.REPL
  • 6.NodeCore
  • 7.module&NPM
  • 8.Encoding
  • 9.Buffer
  • 10.fs
  • 11.Stream-1
  • 11.Stream-2
  • 11.Stream-3
  • 11.Stream-4
  • 12-Network-2
  • 12.NetWork-3
  • 12.Network-1
  • 13.tcp
  • 14.http-1
  • 14.http-2
  • 15.compress
  • 16.crypto
  • 17.process
  • 18.yargs
  • 19.cache
  • 20.action
  • 21.https
  • 22.cookie
  • 23.session
  • 24.express-1
  • 24.express-2
  • 24.express-3
  • 24.express-4
  • 25.koa-1
  • 26.webpack-1-basic
  • 26.webpack-2-optimize
  • 26.webpack-3-file
  • 26.webpack-4.tapable
  • 26.webpack-5-AST
  • 26.webpack-6-sources
  • 26.webpack-7-loader
  • 26.webpack-8-plugin
  • 26.webpack-9-hand
  • 26.webpack-10-prepare
  • 28.redux
  • 28.redux-jwt-back
  • 28.redux-jwt-front
  • 29.mongodb-1
  • 29.mongodb-2
  • 29.mongodb-3
  • 29.mongodb-4
  • 29.mongodb-5
  • 29.mongodb-6
  • 30.cms-1-mysql
  • 30.cms-2-mysql
  • 30.cms-3-mysql
  • 30.cms-4-nunjucks
  • 30.cms-5-mock
  • 30.cms-6-egg
  • 30.cms-7-api
  • 30.cms-8-roadhog
  • 30.cms-9-yaml
  • 30.cms-10-umi
  • 30.cms-12-dva
  • 30.cms-13-dva-ant
  • 30.cms-14-front
  • 30.cms-15-deploy
  • 31.dva
  • 31.cms-13-dva-antdesign
  • 33.redis
  • 34.unittest
  • 35.jwt
  • 36.websocket-1
  • 36.websocket-2
  • 38.chat-api-1
  • 38.chat-api-2
  • 38.chat-3
  • 38.chat-api-3
  • 38.chat
  • 38.chat2
  • 38.chat2
  • 39.crawl-0
  • 39.crawl-1
  • 39.crawl-2
  • 40.deploy
  • 41.safe
  • 42.test
  • 43.nginx
  • 44.enzyme
  • 45.docker
  • 46.elastic
  • 47.oauth
  • 48.wxpay
  • index
  • 52.UML
  • 53.design
  • index
  • 54.linux
  • 57.ts
  • 56.react-ssr
  • 58.ts_react
  • 59.ketang
  • 59.ketang2
  • 61.1.devops-linux
  • 61.2.devops-vi
  • 61.3.devops-user
  • 61.4.devops-auth
  • 61.5.devops-shell
  • 61.6.devops-install
  • 61.7.devops-system
  • 61.8.devops-service
  • 61.9.devops-network
  • 61.10.devops-nginx
  • 61.11.devops-docker
  • 61.12.devops-jekins
  • 61.13.devops-groovy
  • 61.14.devops-php
  • 61.15.devops-java
  • 61.16.devops-node
  • 61.17.devops-k8s
  • 62.1.react-basic
  • 62.2.react-state
  • 62.3.react-high
  • 62.4.react-optimize
  • 62.5.react-hooks
  • 62.6.react-immutable
  • 62.7.react-mobx
  • 62.8.react-source
  • 63.1.redux
  • 63.2.redux-middleware
  • 63.3.redux-hooks
  • 63.4.redux-saga
  • 63.5.redux-saga-hand
  • 64.1.router
  • 64.2.router-connected
  • 65.1.typescript
  • 65.2.typescript
  • 65.3.typescript
  • 65.4.antd
  • 65.4.definition
  • 66-1.vue-base
  • 66-2.vue-component
  • 66-3.vue-cli3.0
  • 66-4.$message组件
  • 66-5.Form组件
  • 66-6.tree
  • 66-7.vue-router-apply
  • 66-8.axios-apply
  • 66-9.vuex-apply
  • 66-10.jwt-vue
  • 66-11.vue-ssr
  • 66-12.nuxt-apply
  • 66-13.pwa
  • 66-14.vue单元测试
  • 66-15.权限校验
  • 67-1-network
  • 68-2-wireshark
  • 7.npm2
  • 69-hooks
  • 70-deploy
  • 71-hmr
  • 72.deploy
  • 73.import
  • 74.mobile
  • 75.webpack-1.文件分析
  • 75.webpack-2.loader
  • 75.webpack-3.源码流程
  • 75.webpack-4.tapable
  • 75.webpack-5.prepare
  • 75.webpack-6.resolve
  • 75.webpack-7.loader
  • 75.webpack-8.module
  • 75.webpack-9.chunk
  • 75.webpack-10.asset
  • 75.webpack-11.实现
  • 76.react_optimize
  • 77.ts_ketang_back
  • 77.ts_ketang_front
  • 78.vue-domdiff
  • 79.grammar
  • 80.tree
  • 81.axios
  • 82.1.react
  • 82.2.react-high
  • 82.3.react-router
  • 82.4.redux
  • 82.5.redux_middleware
  • 82.6.connected
  • 82.7.saga
  • 82.8.dva
  • 82.8.dva-source
  • 82.9.roadhog
  • 82.10.umi
  • 82.11.antdesign
  • 82.12.ketang-front
  • 82.12.ketang-back
  • 83.upload
  • 84.graphql
  • 85.antpro
  • 86.1.uml
  • 86.2.design
  • 87.postcss
  • 88.react16-1
  • 89.nextjs
  • 90.react-test
  • 91.react-ts
  • 92.rbac
  • 93.tsnode
  • 94.1.JavaScript
  • 94.2.JavaScript
  • 94.3.MODULE
  • 94.4.EventLoop
  • 94.5.文件上传
  • 94.6.https
  • 94.7. nginx
  • 95.1. react
  • 95.2.react
  • 96.1.react16
  • 96.2.fiber
  • 96.3.fiber
  • 97.serverless
  • 98.websocket
  • 100.1.react-basic
  • 101.1.monitor
  • 101.2.monitor
  • 102.java
  • 103.1.webpack-usage
  • 103.2.webpack-bundle
  • 103.3.webpack-ast
  • 103.4.webpack-flow
  • 103.5.webpack-loader
  • 103.6.webpack-tapable
  • 103.7.webpack-plugin
  • 103.8.webpack-optimize1
  • 103.9.webpack-optimize2
  • 103.10.webpack-hand
  • 103.11.webpack-hmr
  • 103.11.webpack5
  • 103.13.splitChunks
  • 103.14.webpack-sourcemap
  • 103.15.webpack-compiler1
  • 103.15.webpack-compiler2
  • 103.16.rollup.1
  • 103.16.rollup.2
  • 103.16.rollup.3
  • 103.16.vite.basic
  • 103.16.vite.source
  • 103.16.vite.plugin
  • 103.16.vite.1
  • 103.16.vite.2
  • 103.17.polyfill
  • 104.1.binary
  • 104.2.binary
  • 105.skeleton
  • 106.1.react
  • 106.2.react_hooks
  • 106.3.react_router
  • 106.4.redux
  • 106.5.redux_middleware
  • 106.6.connected-react-router
  • 106.6.redux-first-history
  • 106.7.redux-saga
  • 106.8.dva
  • 106.9.umi
  • 106.10.ketang
  • 106.11.antdesign
  • 106.12.antpro
  • 106.13.router-6
  • 106.14.ssr
  • 106.15.nextjs
  • 106.16.1.cms
  • 106.16.2.cms
  • 106.16.3.cms
  • 106.16.4.cms
  • 106.16.mobx
  • 106.17.fomily
  • 107.fiber
  • 108.http
  • 109.1.webpack_usage
  • 109.2.webpack_source
  • 109.3.dll
  • 110.nest.js
  • 111.xstate
  • 112.Form
  • 113.redux-saga
  • 114.react+typescript
  • 115.immer
  • 116.pro5
  • 117.css-loader
  • 118.1.umi-core
  • 119.2.module-federation
  • 119.1.module-federation
  • 120.create-react-app
  • 121.react-scripts
  • 122.react-optimize
  • 123.jsx-runtime
  • 124.next.js
  • 125.1.linux
  • 125.2.linux-vi
  • 125.3.linux-user
  • 125.4.linux-auth
  • 125.5.linux-shell
  • 125.6.linux-install
  • 125.7.linux-system
  • 125.8.linux-service
  • 125.9.linux-network
  • 125.10.nginx
  • 125.11.docker
  • 125.12.ci
  • 125.13.k8s
  • 125.14.k8s
  • 125.15.k8s
  • 125.16.k8s
  • 126.11.react-1
  • 126.12.react-2
  • 126.12.react-3
  • 126.12.react-4
  • 126.12.react-5
  • 126.12.react-6
  • 126.12.react-7
  • 126.12.react-8
  • 127.frontend
  • 128.rollup
  • 129.px2rem-loader
  • 130.health
  • 131.hooks
  • 132.keepalive
  • 133.vue-cli
  • 134.react18
  • 134.2.react18
  • 134.3.react18
  • 135.function
  • 136.toolkit
  • 137.lerna
  • 138.create-vite
  • 139.cli
  • 140.antd
  • 141.react-dnd
  • 142.1.link
  • 143.1.gulp
  • 143.2.stream
  • 143.3.gulp
  • 144.1.closure
  • 144.2.v8
  • 144.3.gc
  • 145.react-router-v6
  • 146.browser
  • 147.lighthouse
  • 148.1.basic
  • 148.2.basic
  • 148.3.basic
  • 148.4.basic
  • 148.5.basic
  • 149.1.vite
  • 149.2.vite
  • 149.3.vite
  • 149.4.vite
  • 150.react-window
  • 151.react-query
  • 152.useRequest
  • 153.transition
  • 154.emotion
  • 155.1.formily
  • 155.2.formily
  • 155.3.formily
  • 155.3.1.mobx.usage
  • 155.3.2.mobx.source
  • 156.vue-loader
  • 103.11.mf
  • 157.1.react18
  • 158.umi4
  • 159.rxjs
  • 159.rxjs2
  • 160.bff
  • 161.zustand
  • 162.vscode
  • 163.emp
  • 164.cors
  • 1. JS模块化方面的不足
  • 2. CommonJS规范
  • 3. Node中的CommonJS
  • 4. 模块分类
    • 4.1 原生模块
    • 4.2 文件模块
    • 4.3 第三方模块
      • 4.3.1 . 全局目录
    • 4.4 模块的加载策略
    • 4.5 文件模块查找规则
  • 5. 从模块外部访问模块内的成员
  • 6. 模块对象的属性
  • 7. 包
  • 8. NPM
    • 8.1 npm提供的功能
    • 8.2 npm命令
      • 8.2.1 (npm install)安装包
      • 8.2.2 卸载包
      • 8.2.3 更新包
    • 8.3 包的安装模式
      • 8.3.1 本地安装
      • 8.3.2 全局安装
    • 8.3 注册、登录和发布模块
    • 8.4 npx
      • 8.4.1 调用项目安装的模块
      • 8.4.2 避免全局安装模块
      • 8.4.3 --no-install 参数和--ignore-existing 参数
  • 9. yarn
    • 9.1 初始化一个新的项目
    • 9.2 添加一个依赖包
    • 9.3 更新一个依赖包
    • 9.4 删除一个依赖包
    • 9.5 安装所有的依赖包
  • 参考
  • 参考资料

1. JS模块化方面的不足 #

  • JS没有模块系统,不支持封闭的作用域和依赖管理
  • 没有标准库,没有文件系统和IO流API
  • 也没有包管理系统

2. CommonJS规范 #

  • 封装功能
  • 封闭作用域
  • 可能解决依赖问题
  • 工作效率更高,重构方便

3. Node中的CommonJS #

  • 在node.js 里,模块划分所有的功能,每个JS都是一个模块
  • 实现require方法,NPM实现了模块的自动加载和安装依赖
    (function(exports,require,module,__filename,__dirname){
      exports = module.exports={}
      exports.name = 'zfpx';
      exports = {name:'zfpx'};
      return module.exports;
    })

4. 模块分类 #

4.1 原生模块 #

http path fs util events 编译成二进制,加载速度最快,原来模块通过名称来加载

4.2 文件模块 #

在硬盘的某个位置,加载速度非常慢,文件模块通过名称或路径来加载 文件模块的后缀有三种

  • 后缀名为.js的JavaScript脚本文件,需要先读入内存再运行
  • 后缀名为.json的JSON文件,fs 读入内存 转化成JSON对象
  • 后缀名为.node的经过编译后的二进制C/C++扩展模块文件,可以直接使用

    一般自己写的通过路径来加载,别人写的通过名称去当前目录或全局的node_modules下面去找

4.3 第三方模块 #

  • 如果require函数只指定名称则视为从node_modules下面加载文件,这样的话你可以移动模块而不需要修改引用的模块路径
  • 第三方模块的查询路径包括module.paths和全局目录

4.3.1 . 全局目录 #

window如果在环境变量中设置了NODE_PATH变量,并将变量设置为一个有效的磁盘目录,require在本地找不到此模块时向在此目录下找这个模块。 UNIX操作系统中会从 $HOME/.node_modules $HOME/.node_libraries目录下寻找

4.4 模块的加载策略 #

lookmodule

4.5 文件模块查找规则 #

lookmodule

5. 从模块外部访问模块内的成员 #

  • 使用exports对象
  • 使用module.exports导出引用类型

6. 模块对象的属性 #

  • module.id
  • module.filename
  • module.loaded
  • module.parent
  • module.children
  • module.paths

7. 包 #

在Node.js中,可以通过包来对一组具有相互依赖关系的模块进行统一管理,通过包可以把某个独立功能封装起来 每个项目的根目录下面,一般都有一个package.json文件,定义了这个项目所需要的各种模块,以及项目的配置信息(比如名称、版本、许可证等元数据)。npm install命令根据这个配置文件,自动下载所需的模块,也就是配置项目所需的运行和开发环境

项目 描述
name 项目名称
version 版本号
description 项目描述
keywords: {Array} 关键词,便于用户搜索到我们的项目
homepage 项目url主页
bugs 项目问题反馈的Url或email配置
license 项目许可证
author,contributors 作者和贡献者
main 主文件
bin 项目用到的可执行文件配置
repository 项目代码存放地方
scripts 声明一系列npm脚本指令
dependencies 项目在生产环境中依赖的包
devDependencies 项目在生产环境中依赖的包
peerDependencies 应用运行依赖的宿主包

package.json packagejson

8. NPM #

  • 安装完node之后只能使用Node语言特性及核心函数,我们还需要一个系统来下载、安装和管理第三方模块
  • 在Node里这个系统被称为Node包管理器(Node Package Manager,NPM)

8.1 npm提供的功能 #

  • 公共注册服务,用户可以把自己写的包上传到服务器上
  • 命令行下载工具,用户可以通过npm命令把别人写的包下载到自己电脑上,还可以管理自己模块依赖的其它模块

搜索第三方包的地址

https://www.npmjs.com/search

8.2 npm命令 #

8.2.1 (npm install)安装包 #
  • 打开命令行或终端,进入要安装包的目录,然后执行以下命令安装依赖的模块
npm install <package-name>
npm i mime

此命令会从服务器上下载此模块到当前目录下的node_modules目录下,如果node_modules目录不存在则会创建一个

  • 也可以安装特定的版本

    npm install <package name>@<version spec>
    npm i mime@2.1
  • 还可以使用一个版本号范围来替换点位符

npm i mime@2.x
8.2.2 卸载包 #
npm uninstall <package name>
8.2.3 更新包 #

我们还可以通过以下指令更新已经安装的包

npm update <package name>

8.3 包的安装模式 #

8.3.1 本地安装 #

  • 默认情况下安装命令会把对应的包安装到当前目录下,这叫本地安装,如果包里有可执行的文件NPM会把可执行文件安装到./node_modules/.bin目录下
  • 本地安装的模块只能在当前目录和当前目录的子目录里面使用

8.3.2 全局安装 #

  • 如果希望安装的包能够在计算机机的所有目录下面都能使用就需要全局安装
npm install <package-name> -g
npm install mime -g
C:\Users\zhufeng\AppData\Roaming\npm\node_modules\mime
  • 在全局安装的模式下,npm会把包安装到全局目录,通过此命令可以查看当前全局目录的位置
npm root -g
C:\Users\Administrator\AppData\Roaming\npm\node_modules
  • 如果包里有可执行文件,会把可执行文件安装到此node_modules的上一级目录中。
C:\Users\Administrator\AppData\Roaming\npm
  • 全局安装的一般是需要在任意目录下面执行的命令,比如babel
npm install babel-cli -g
  • 如果全局安装的命令不能用则可能是没有正确配置用户变量PATH,需要在系统变量中为PATH变量添加全局安装目录

8.3 注册、登录和发布模块 #

  1. 注册npm账号

npmjs

  1. 登录
npm login
  1. 发布
npm publish

8.4 npx #

  • npm 从5.2版开始,增加了 npx 命令

8.4.1 调用项目安装的模块 #

  • npx 想要解决的主要问题,就是调用项目内部安装的模块
npm install -D mocha

一般来说,调用mocha只能在package.json的scripts字段里面使用

"scripts": {
    "test": "mocha -version"
}
npx mocha --version

npx 的原理很简单,就是运行的时候,会到node_modules/.bin路径和环境变量$PATH里面,检查命令是否存在

8.4.2 避免全局安装模块 #

  • 除了调用项目内部模块,npx 还能避免全局安装的模块。比如,create-react-app这个模块是全局安装,npx 可以运行它,而且不进行全局安装
$ npx create-react-app my-react-app

上面代码运行时,npx 将create-react-app下载到一个临时目录,使用以后再删除

8.4.3 --no-install 参数和--ignore-existing 参数 #

  • 如果想让 npx 强制使用本地模块,不下载远程模块,可以使用--no-install参数。如果本地不存在该模块,就会报错
  • 反过来,如果忽略本地的同名模块,强制安装使用远程模块,可以使用--ignore-existing参数

9. yarn #

Yarn 是一个依赖管理工具。它能够管理你的代码,并与全世界的开发者分享代码。 代码是通过包(有时也被称为模块)进行共享的。 在每一个包中包含了所有需要共享的代码,另外还定义了一个package.json文件,用来描述这个包。

9.1 初始化一个新的项目 #

yarn init

9.2 添加一个依赖包 #

yarn add [package]
yarn add [package]@[version]
yarn add [package]@[tag]

9.3 更新一个依赖包 #

yarn upgrade [package]
yarn upgrade [package]@[version]
yarn upgrade [package]@[tag]

9.4 删除一个依赖包 #

yarn remove [package]

9.5 安装所有的依赖包 #

yarn

或者

yarn install

参考 #

  • yarn

参考资料 #

  • npm官方手册
  • npm总结

访问验证

请输入访问令牌

Token不正确,请重新输入