npm & gulp & webpack 基础

一、npm

1. 基础概念

管理依赖包的一个工具。
npm 由三个独立的部分组成：

• 网站
• 注册表（registry）
• 命令行工具 (CLI)

2. 创建 package.json 文件的两种方式

• npm init

用这种方式来创建 package.json 文件，在生成这个文件的过程中，需要自己根据命令行的提示，输入要求的信息，比如：name、version、description等。

// package.json
{
  "name": "test-npm-install",
  "version": "1.0.0",
  "description": "a project to test npm install",
  "main": "index.js",
  "scripts": {
    "test": "test"
  },
  "keywords": [
    "npm",
    "install"
  ],
  "author": "jasmine",
  "license": "ISC"
}

• npm init --yes

用这种方式创建 package.json 文件，过程中不会要求输入上面那种方式要求的信息，而是会采用一些默认的信息来完成文件的生成。

// package.json
{
  "name": "test-npm-install",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

3. 一些常用命令

• npm install

若当前项目目录下，已经有 package.json 文件了，则将package.json中所定义的所有安装包都更新都最新版。

npm install package_name --save
等价于 npm install package_name -S | P
等价于 npm install package_name
安装包在项目目录下的node_modules文件夹下，并且安装的包的名称一版本的信息会写入 package.json 文件中的 dependencies 中

	npm install express --save

// package.json
{
	....
	"dependencies": {
	    "express": "^4.17.1"
	  }
}

npm install package_name --save-dev
等价于 npm install package_name -D
安装包在项目目录下的node_modules文件夹下，并且安装的包的名称一版本的信息会写入 package.json 文件中的 devDependencies 中

npm install vue --save-dev

{
	...
	"devDependencies": {
	    "vue": "^2.6.10"
	  }
}

npm install package_name -g
全局安装，具体位置取决于你的 npm 的配置，安装记录不会写入 package.json 中。

• npm uninstall

移除包，并且根据参数移除 package.json 文件下的对应的 dependencies 或 devDependencies 中的依赖记录。
命令行参数含义与 npm install 命令的参数含义一致。

• npm config list

查看配置

; cli configs
metrics-registry = "https://registry.npmjs.org/"
scope = ""
user-agent = "npm/5.6.0 node/v8.11.3 win32 x64"

; builtin config undefined
prefix = "C:\\Users\\jasmine\\AppData\\Roaming\\npm"

; node bin location = C:\Program Files\nodejs\node.exe
; cwd = C:\Users\jasmine\Desktop\npm-demo
; HOME = C:\Users\jasmine
; "npm config ls -l" to show all defaults.

• npm config set key value

修改配置

	npm config set registry https://nexus.choerodon.com.cn/repository/train-group-npm/

• npm update 包名 (–no-save)

更新包

• npm ls 包名

查看安装的包的依赖树

• npm config delete key

删除 npm 的某个配置项

4. 脚本与钩子

可以在 package.json 的 scripts 中添加一些脚本。

• 默认脚本（ 如：install，start，version，publish等 ）
• 自定义脚本（ 使用 npm run 脚本的名字来运行脚本 ）

每一个脚本都有两个钩子：pre 和 post
npm run 脚本名字就可以执行脚本。

5. npm 版本迭代

**npm version （patch，minor，major）**可以用于获取版本号。

	major.minor.patch

6. npm 发布

• npm 发布步骤
• 1. 登录

	npm login --registry <库的地址>

• 2. 查看登录信息

	npm whoami

• 3. 发布

	npm publish <--tag tag名> <--registry 库的地址>

• 4. 查看包的信息

	npm info <包名>

• 撤销发布

1. 24 h 之内可使用：

	npm unpublish <包名@版本号>

2. 24 h 以外可使用：

	npm deprecate <包名@版本号>

• 添加 tag

	npm dist-tag add <包名@版本号><tag名>

7. tips

dependencies：生产环境依赖
devDependencies：开发及测试环境依赖
peerDependencies：依赖版本要求的范围，如：

{
	...
	"peerDependencies": {
		"gulp": ">=2.0.0"
	}
}

二、webpack

本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。

1 . 核心概念：

• entry
• output
• loaders( module.rules )
• plugins

2. 使用流程

1. 创建目录，并初始化

	mkdir webpack-demo
	cd webpack-demo
	npm init

2. 安装 webpack 全家桶

	npm install webpack webpack-dev-server webpack-cli -D

3. 创建 src 目录

	mkdir src

4. 在 src 目录下创建 index.js ，index.html，编写相应的代码
5. 在项目的根目录下创建 webpack.config.js 文件
6. 在 webpack 的配置文件中按实际需要编写设置
7. 在 package.json 文件中增加 npm 脚本 ，如：

	{
		...
		"scripts": [
			"test": "...",
			"start": "webpack-dev-server",
			"build": "webpack"
		]
	}

tip: html-webpack-plugin 是一个用于解析 html 文件的 webpack 插件

3. babel-loader

	npm install babel-loader@8.0.0-beta.0 @babel/core @babel/preset-env webpack

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      }
    }
  ]
}

webpack 的所有配置项

const path = require('path');

module.exports = {
  mode: "production", // "production" | "development" | "none"
  mode: "production", // enable many optimizations for production builds
  mode: "development", // enabled useful tools for development
  mode: "none", // no defaults
  // Chosen mode tells webpack to use its built-in optimizations accordingly.

  entry: "./app/entry", // string | object | array
  entry: ["./app/entry1", "./app/entry2"],
  entry: {
    a: "./app/entry-a",
    b: ["./app/entry-b1", "./app/entry-b2"]
  },
  // 这里应用程序开始执行
  // webpack 开始打包

  output: {
    // webpack 如何输出结果的相关选项

    path: path.resolve(__dirname, "dist"), // string
    // 所有输出文件的目标路径
    // 必须是绝对路径（使用 Node.js 的 path 模块）

    filename: "bundle.js", // string
    filename: "[name].js", // 用于多个入口点(entry point)（出口点？）
    filename: "[chunkhash].js", // 用于长效缓存
    // 「入口分块(entry chunk)」的文件名模板（出口分块？）

    publicPath: "/assets/", // string
    publicPath: "",
    publicPath: "https://cdn.example.com/",
    // 输出解析文件的目录，url 相对于 HTML 页面

    library: "MyLibrary", // string,
    // 导出库(exported library)的名称

    libraryTarget: "umd", // 通用模块定义    // 导出库(exported library)的类型

    /* 高级输出配置（点击显示） */  },

  module: {
    // 关于模块配置

    rules: [
      // 模块规则（配置 loader、解析器等选项）

      {
        test: /\.jsx?$/,
        include: [
          path.resolve(__dirname, "app")
        ],
        exclude: [
          path.resolve(__dirname, "app/demo-files")
        ],
        // 这里是匹配条件，每个选项都接收一个正则表达式或字符串
        // test 和 include 具有相同的作用，都是必须匹配选项
        // exclude 是必不匹配选项（优先于 test 和 include）
        // 最佳实践：
        // - 只在 test 和 文件名匹配 中使用正则表达式
        // - 在 include 和 exclude 中使用绝对路径数组
        // - 尽量避免 exclude，更倾向于使用 include

        issuer: { test, include, exclude },
        // issuer 条件（导入源）

        enforce: "pre",
        enforce: "post",
        // 标识应用这些规则，即使规则覆盖（高级选项）

        loader: "babel-loader",
        // 应该应用的 loader，它相对上下文解析
        // 为了更清晰，`-loader` 后缀在 webpack 2 中不再是可选的
        // 查看 webpack 1 升级指南。

        options: {
          presets: ["es2015"]
        },
        // loader 的可选项
      },

      {
        test: /\.html$/,
        test: "\.html$"

        use: [
          // 应用多个 loader 和选项
          "htmllint-loader",
          {
            loader: "html-loader",
            options: {
              /* ... */
            }
          }
        ]
      },

      { oneOf: [ /* rules */ ] },
      // 只使用这些嵌套规则之一

      { rules: [ /* rules */ ] },
      // 使用所有这些嵌套规则（合并可用条件）

      { resource: { and: [ /* 条件 */ ] } },
      // 仅当所有条件都匹配时才匹配

      { resource: { or: [ /* 条件 */ ] } },
      { resource: [ /* 条件 */ ] },
      // 任意条件匹配时匹配（默认为数组）

      { resource: { not: /* 条件 */ } }
      // 条件不匹配时匹配
    ],

    /* 高级模块配置（点击展示） */  },

  resolve: {
    // 解析模块请求的选项
    // （不适用于对 loader 解析）

    modules: [
      "node_modules",
      path.resolve(__dirname, "app")
    ],
    // 用于查找模块的目录

    extensions: [".js", ".json", ".jsx", ".css"],
    // 使用的扩展名

    alias: {
      // 模块别名列表

      "module": "new-module",
      // 起别名："module" -> "new-module" 和 "module/path/file" -> "new-module/path/file"

      "only-module$": "new-module",
      // 起别名 "only-module" -> "new-module"，但不匹配 "only-module/path/file" -> "new-module/path/file"

      "module": path.resolve(__dirname, "app/third/module.js"),
      // 起别名 "module" -> "./app/third/module.js" 和 "module/file" 会导致错误
      // 模块别名相对于当前上下文导入
    },
    /* 可供选择的别名语法（点击展示） */
    /* 高级解析选项（点击展示） */  },

  performance: {
    hints: "warning", // 枚举    maxAssetSize: 200000, // 整数类型（以字节为单位）
    maxEntrypointSize: 400000, // 整数类型（以字节为单位）
    assetFilter: function(assetFilename) {
      // 提供资源文件名的断言函数
      return assetFilename.endsWith('.css') || assetFilename.endsWith('.js');
    }
  },

  devtool: "source-map", // enum  // 通过在浏览器调试工具(browser devtools)中添加元信息(meta info)增强调试
  // 牺牲了构建速度的 `source-map' 是最详细的。

  context: __dirname, // string（绝对路径！）
  // webpack 的主目录
  // entry 和 module.rules.loader 选项
  // 相对于此目录解析

  target: "web", // 枚举  // 包(bundle)应该运行的环境
  // 更改 块加载行为(chunk loading behavior) 和 可用模块(available module)

  externals: ["react", /^@angular\//],  // 不要遵循/打包这些模块，而是在运行时从环境中请求他们

  stats: "errors-only",  // 精确控制要显示的 bundle 信息

  devServer: {
    proxy: { // proxy URLs to backend development server
      '/api': 'http://localhost:3000'
    },
    contentBase: path.join(__dirname, 'public'), // boolean | string | array, static file location
    compress: true, // enable gzip compression
    historyApiFallback: true, // true for index.html upon 404, object for multiple paths
    hot: true, // hot module replacement. Depends on HotModuleReplacementPlugin
    https: false, // true for self-signed, object for cert authority
    noInfo: true, // only errors & warns on hot reload
    // ...
  },

  plugins: [
    // ...
  ],
  // 附加插件列表


  /* 高级配置（点击展示） */}

三、gulp

自动化构建工具，规范化团队开发的流程。

1. 使用方法

1. 安装依赖
2. 在根目录中新增 gulpfile.js
3. 导入 gulp
4. 定制任务
5. 通过 gulp 任务名可以执行任务

gulp 是基于 node 的 Web 前端自动化开发工具。
gulp 是将在编写前端代码中会进行的一些常规的重复的操作提炼出来，即将规律转化为代码，减少一些重复操作，提高开发效率（可以在 npm 的脚本的生命周期中调用，以完成一些周期性的重复的工作）。

2. 使用场景

1. 压缩 JS 文件
2. 压缩 CSS 文件
3. 压缩图片
4. 编译 SASS / LESS
5. …

3. 基本使用格式

let gulp = require('gulp');
let 处理函数 = require('处理函数模块');

gulp.task('任务名称', function() {
	gulp.src('源文件路径')
		.pipe(处理函数)
		.pipe(gulp.dest('目标文件路径'))；
});

针对处理对象的不同，所需要安装引入的处理模块也是不一样的。
如：

JS 压缩模块：gulp-uglify
CSS 压缩模块：gulp-minify-css
图片压缩模块：gulp-imagemin

LESS编译模块：gulp-less
SASS编译模块：gulp-sass

注意点

Gulp 需要全局安装与本地安装都有；
Gulp3 与 Gulp4之间存在着差异，其中一点就是：Gulp4 不允许以 Gulp3 原来的形式传递一个依赖任务列表，若要传递任务列表，需要gulp.series和gulp.parallel。或者，可以安装 3 版本的，比如 3.9.1；
关于 gulp 的所有设置都要写在项目目录下的 gulpfile.js 文件中。