npm & Yarn

零一匠心
90 阅读6分钟

基础知识

  • npm：包管理器
  • webpack：JavaScript 应用程序的静态模块打包器
  • ES6：从ES5到ES6有重大改动
  • vue react webapp 微信小程序等等：项目构建
  • axios：前后端请求
  • nvm：Node Version Manager 管理不同的 node 版本

认知npm

  • Node Package Manager：Node 包管理器，是Node.js默认的、以JavaScript编写的软件包管理系统
  • www.npmjs.com/

安装npm

  • npm是Node.js默认的软件包管理系统，安装完 node 后，就会默认安装 npm
  • Node下载安装：nodejs.cn/
    • 查看node版本：node -v
    • 查看npm版本：npm -v
    • 使用npm 安装最新的npm：npm install npm -g
  • npm install jquery 注意：执行命令的当前目录也就是包的安装目录
  • 镜像设置
    • 设置镜像
    • 查看镜像
      • npm config get registry
    • 使用 nrm 工具切换淘宝源
      • npx nrm use taobao
    • 切换为官方源
      • npx nrm use npm
    • 可使用淘宝定制的命令工具 cnpm（gzip 压缩支持）命令行工具代替默认的npm

使用npm

  • 查看版本：npm -v
  • 安装模块：npm install jquery
  • 安装指定版本号的模块：npm install jquery@3.7.1
  • 安装全局模块：npm install jquery -g
  • 查看所有全局模块：npm list -g
  • 查看某个模块所有版本：npm list jquery
  • package 的 dependencies 中写入安装的依赖：npm install -save jquery
    • -save 是默认参数，开发和运行都依赖
  • package 的 devDependencies 中写入开发时的依赖：npm install -save-dev jquery
    • -save-dev 开发时依赖，发布后不依赖，比如 压缩css、js的模块再发布后就不需要了

了解package.js

  • 生成 Node.js 项目
    • 直接生成：npm init --yes
    • 交互式生成：npm init
  • 运行 package.json 文件中指定的脚本命令：npm run test
  • 根据 package.json 文件下载项目中所有的依赖：npm install
  • package-lock.json
    • 是在 npm 5以后加的，默认生成锁文件，为了锁定 package.json 中固定依赖的版本。
  • package.json 属性
    • name：包名
    • version：包版本
    • description：包描述
    • homepage：包官网 url
    • author：包作者
    • contributors：包的其他贡献者姓名
    • dependencies：依赖包列表
    • repository：包仓库类型（git | svn | git | GitHub）
    • main：程序主入口，require('moduleName') 会加载这个文件，默认为模块艮目录下的 index.js
    • keywords：关键字
  • package.json 文件中版本号的说明
    • "5.1.2" 表示安装指定的 5.1.2 版本
    • "~5.1.2" 表示安装 5.1.X 的最新版本
    • "^5.1.2" 表示安装指定的 5.X.X 的最新版本

npm 常用命令

  • 查看帮助：npm help command
    • npm help install
    • npm help publish
  • 更新 node_modules 中的包
    • npm update package
    • npm update package -g
  • 清空 npm 本地缓存
    • 清空场景：使用相同版本号发布新代码
  • 撤销自己发布过的某个版本代码
    • npm unpublish package@versiion

模块的基本应用

  • 导包方式

    • 原始的导包方式

      • 没有 webpack 之前需要在 html 中手动定位每个包的路径 
          <!DOCTYPE html>
  <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>My Web Page</title>
          <script src="./node_modules/axios/dist/axios.js" defer></script>
  </html>
      • JavaScript 出于安全考量，并没有获取客户端的文件系统，所以管理多个 JavaScript 代码就是把每个文件下载下来，变量是全局共享的 即 所有脚本中的变量和函数都共享同一个全局作用域。可能会导致变量和函数的冲突。
      • CommonJS 中很大的一部分便是对模块系统的规范

    • 使用 require 语句导包

      • foo.js
       module.exports = function(name) {
   return 'Hello, '+ name + '!';
 }
      • index.js
       const axios = require('axios')
 let sayHello = require('./foo.js')
 console.log(sayHello('dawn'));
 axios.get('https://www.baidu.com')
 .then(response => {
     console.log('Request was successful!', response.data);
 })
 .catch(error => {
     console.log('Error occurred!', error);
 });
      • 运行结果
      $ node index.js
Hello, dawn!
Request was successful! <html>
<head>
        <script>
                location.replace(location.href.replace("https://","http://"));
        </script>
</head>
<body>
        <noscript><meta http-equiv="refresh" content="0;url=http://www.baidu.com/"></noscript>
</body>
</html>

    • 新的 ES6 可以使用 import 导包

ES6 兼容性解决

  • 兼容表 compat-table.github.io/compat-tabl…

  • IE10+、Chrome、FireFox、移动端、NodeJS 都支持 ES6

  • 兼容低版本浏览器方式

    • 在线转换：用户访问时加载转换包，根据浏览器版本在线转换
      • 缺点：增加页面的渲染时间
    • 提前编译：服务端使用 ES6 开发，发布时使用工具包 将其转为 ES5 的语法
      • 常用工具：babel、jsx、traceur、es6-shim 等

  • 客户端转换渲染

      <!DOCTYPE html>
  <head>
      <meta charset="UTF-8">
      <title>My Web Page</title>
      <script src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
      <script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
      <script src="https://unpkg.com/react-dom@17/umd/react-dom-server.browser.production.min.js"></script>
      <script src="./node_modules/babel-core/browser.js"></script>

      <script type="text/babel">
          const React = window.React;
          const ReactDOMServer = window.ReactDOMServer;   
          const name = "dawn";
          const element = <h1>Hello, {name}!</h1>;
          const element_str = ReactDOMServer.renderToStaticMarkup(element);
          console.log(element_str);
      </script>
  </head>

    image.png

  • 服务端转换渲染

    • 目录结构
      • 源代码目录：./src
      • 转换后的目录：./dist
      • babelrc 配置说明文件：./.babelrc
    • 安装 babel-cli
      • npm install --save-dev babel-cli
      • babel -V
    • 安装如下库，将源代码转为 es2015
      • npm install @babel/core @babel/cli @babel/preset-env @babel/plugin-transform-runtime --save-dev
    • 编写 .babelrc 文件 
      {
    "presets": [
        [
            "@babel/preset-env",
            {
                "targets": "es2015"
            }
        ]
    ],
    "plugins": [
        "@babel/plugin-transform-runtime"
    ]
}
    • package.json 添加脚本 
      "scripts": {
    "build": "babel src -d dist --presets=@babel/preset-env"
},
    • 编译 npm run build image.png

npm和yarn的对比和迁移

  • Yarn 是由 Facebook、Google、Exponent 和 Tiled 联合推出了一个新的 JS 包管理工具，Yarn 是为了弥补 npm 的一些缺陷
    • npm5 缺陷
      • npm install 较慢，新的项目需要长时间等待，删除 node_modulesc 重新安装也很慢
      • 同一个项目，多人开发，由于安装的版本不一致出现 BUG
  • Yarn 官网：www.yarnpkg.com
  • yarn 的安装
    • 下载 node.js 使用 npm 安装 yarn
      • npm install -g yarn
      • yarn --version
    • 安装 node.js 下载 yarn 的安装程序
      • .msi 的 yarn 安装文件，使用 windows 向导安装 yarn
  • yarn 镜像设置
  • yarn 的基本使用
    • yarn init
      • 初始化项目 同 npm init 输入信息生成 package.json 文件
    • yarn install
      • 安装 package.json 中所有的包，并将包以及它的依赖保存到 yarn.lock
    • yarn install --flat
      • 安装一个包的单一版本
    • yarn install --force
      • 强制重新下载所有的包
    • yarn install --production
      • 只安装 dependencies 中的包
    • yarn install --no-lockfile
      • 不读取或生成 yarn.lock
    • yarn install --pure-lockfile
      • 不生成 yarn.lock
    • yarn add [package]
      • 添加一个依赖包，会自动更新到 package.json 和 yarn.lock 文件中
    • yarn add [package]@[version]
      • 安装指定版本的依赖包，这里指定的是主要版本，如果需要精确到小版本，使用 -E 参数
    • yarn add [package]@[tag]
      • 安装某个 tag （比如 beta、next 或者 latest）
    • yarn add --dev/-D
      • 加到 devDependencies
    • yarn add --peer/-P
      • 加到 peerDependencies
    • yarn add --option/-O
      • 加到 optionalDependencies
    • yarn add --exact/-E
    • yarn add --tilde/-T
      • 默认安装 包的 主要版本中的 最新版本
        • yarn add foo@1.2.3 会接受 1.9.1版本 不接受 2.1.0 版本
        • yarn add foo@1.2.3 --exact 只能接受 1.2.3 版本
        • yarn add foo@1.2.3 --tiled 会接受 1.2.9 不接受 1.3.0
    • yarn publish
      • 发布包
    • yarn remove <packageName>
      • 移除包 会自动更新到 package.json 和 yarn.lock
    • yarn upgrade
      • 更新包到基于规范 范围的最新版本
    • yarn run
      • 运行脚本 执行 package.json 中的 scripts 属性下定义的脚本
    • yarn info <packageName>
      • 显示指定包的信息
    • yarn cache list
      • 查看已经缓存的包
    • yarn cache dir
      • 查看全局缓存目录
    • yarn cache clean
      • 清除缓存

yarn 的优点

  • 速度快
  • 安装版本统一
  • 输出简洁
  • 多注册来源处理
  • 更好的语义化
  • npm install
    • npm install react --save
    • npm uninstall react --save
    • npm install react --save-dev
    • npm update --save
  • yarn
    • yarn add react
    • yarn remove react
    • yarn add react --dev
    • yarn upgrade
avatar
文章
阅读
粉丝