Node.js、NPM包管理器、Webpack的使用记录

Node.js、NPM包管理器、Webpack的使用记录

• 一、Node.js
• • 安装Node.js
  • 简单使用Node.js
• 二、NPM包管理器
• • Npm管理项目
  • 设置包路径
  • 修改Npm镜像
  • 安装cnpm
  • 镜像源管理
  • Npm相关命令
• 三、模块化
• • ES6模块化规范
  • • 导出模块
    • 导入模块
    • 执行测试
  • Babel转码
  • • 安装Babel转码工具
    • 配置.babelrc
    • 安装转码器
    • 转码
    • 转码后执行测试
• 四、webpack
• • 安装webpack
  • 初始化项目
  • • 创建Js模块
    • 定义main.js
  • Js打包
  • • 创建配置文件
    • 执行编译命令
    • 创建入口页面
    • 执行测试
  • CSS打包
  • • 安装相关Loader插件
    • 修改webpack.config.js
    • 创建style.css
    • main.js引入css
    • 执行运行编译命令
    • 执行测试

一、Node.js

Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。

Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。

安装Node.js

官网：https://nodejs.org/en/

中文网：http://nodejs.cn/

LTS：长期支持版本

Current：最新版

下载完毕后，双击运行安装，安装完毕检查PATH环境变量是否设置了node.js的安装路径，执行node ‐v命令测试验证。

C:\Users\JackChen>node -v
v14.15.1

C:\Users\JackChen>

简单使用Node.js

console.log("Hello Node.js");

//引入http模块
const http = require('http');
//创建服务器
http.createServer(function (request, response) {
    response.writeHead(200, { 'Content-Type': 'text/html' });
    // 发送响应数据 "Hello World"
    response.end('<h1>Hello Node.js Server</h1>');
    // 监听端口
}).listen(8888);

console.log('Server running at http://127.0.0.1:8888/');

运行

PS D:\WorkSpace\VsCode> node node.js
Hello Node.js
Server running at http://127.0.0.1:8888/

二、NPM包管理器

npm全称Node Package Manager，是node包管理和分发的工具，使用NPM可以对应用的依赖进行管理，NPM的功能和服务端项目构建工具maven差不多，通过npm 可以很方便地下载js库，打包js文件。

node.js已经集成了npm工具，在命令提示符输入 npm -v 可查看当前npm版本。

C:\Users\JackChen>npm -v
6.14.8

C:\Users\JackChen>

Npm管理项目

执行npm init，按照提示输入相关信息，如果是用默认值则直接回车即可，最后生成 package.json文件

PS D:\WorkSpace\VsCode\npm-project> npm init 
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help init` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (npm-project)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to D:\WorkSpace\VsCode\npm-project\package.json:

{
  "name": "npm-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}


Is this OK? (yes) yes
PS D:\WorkSpace\VsCode\npm-project> 

执行npm init -y直接生成 package.json 文件

设置包路径

包路径就是npm从远程下载的js包所存放的路径。使用 npm config ls 查询NPM管理包路径（NPM下载的依赖包所存放的路径）

NPM默认的管理包路径在C:/用户/[用户名]/AppData/Roming/npm/node_meodules。

为了方便对依赖包管理以及一些其他原因，一般将管理包的路径设置在单独的地方，如：将安装目录设置在node.js的目录下。

创建node_global和node_cache，执行下边的命令：

	npm config set prefix "D:\program files\nodejs\node_global"
	
	npm config set cache "D:\program files\nodejs\node_cache"

查询NPM管理包路径：npm config ls

C:\Users\JackChen>npm config ls
; cli configs
metrics-registry = "https://registry.npmjs.org/"
scope = ""
user-agent = "npm/6.14.8 node/v14.15.1 win32 x64"

; userconfig C:\Users\JackChen\.npmrc
cache = "D:\\program files\\nodejs\\node_cache"
prefix = "D:\\program files\\nodejs\\node_global"

; builtin config undefined

; node bin location = D:\program files\nodejs\node.exe
; cwd = C:\Users\JackChen
; HOME = C:\Users\JackChen
; "npm config ls -l" to show all defaults.


C:\Users\JackChen>

修改Npm镜像

NPM官方的管理的包都是从http://npmjs.com下载，但是这个网站在国内速度很慢。在开发中通常使用国内镜像，推荐使用淘宝 NPM 镜像 http://npm.taobao.org/，淘宝 NPM 镜像是一个完整 npmjs.com 镜像，同步频率目前为 10分钟一次，以保证尽量与官方服务同步。

设置镜像地址

# 以后所有的 npm install 都会经过淘宝的镜像地址下载
npm config set registry https://registry.npm.taobao.org 

#查看npm配置信息
npm config list

安装cnpm

不修改Npm的默认镜像源，单独安装cnpm，即既可以使用npm install也可以使用cnpm install来安装库文件。

输入命令，进行全局安装淘宝镜像。

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

C:\Users\JackChen>npm install -g cnpm --registry=https://registry.npm.taobao.org
npm WARN deprecated har-validator@5.1.5: this
D:\program files\nodejs\node_global\cnpm -> D:\program files\nodejs\node_global\node_modules\cnpm\bin\cnpm
+ cnpm@6.1.1
updated 3 packages in 66.711s

C:\Users\JackChen>

安装后，可以使用cnpm -v命令查看cnpm的版本

C:\Users\JackChen>cnpm -v
cnpm@6.1.1 (D:\program files\nodejs\node_global\node_modules\cnpm\lib\parse_argv.js)
npm@6.14.9 (D:\program files\nodejs\node_global\node_modules\cnpm\node_modules\npm\lib\npm.js)
node@14.15.1 (D:\Program Files\nodejs\node.exe)
npminstall@3.28.0 (D:\program files\nodejs\node_global\node_modules\cnpm\node_modules\npminstall\lib\index.js)
prefix=D:\program files\nodejs\node_global
win32 x64 10.0.19042
registry=https://r.npm.taobao.org

C:\Users\JackChen>

镜像源管理

全局安装nrm：cnpm install -g nrm

使用nrm ls 查看镜像

C:\Users\JackChen>nrm ls

* npm -------- https://registry.npmjs.org/
  yarn ------- https://registry.yarnpkg.com/
  cnpm ------- http://r.cnpmjs.org/
  taobao ----- https://registry.npm.taobao.org/
  nj --------- https://registry.nodejitsu.com/
  npmMirror -- https://skimdb.npmjs.com/registry/
  edunpm ----- http://registry.enpmjs.org/

使nrm use XX切换镜像

C:\Users\JackChen>nrm use taobao


   Registry has been set to: https://registry.npm.taobao.org/


C:\Users\JackChen>nrm ls

  npm -------- https://registry.npmjs.org/
  yarn ------- https://registry.yarnpkg.com/
  cnpm ------- http://r.cnpmjs.org/
* taobao ----- https://registry.npm.taobao.org/
  nj --------- https://registry.nodejitsu.com/
  npmMirror -- https://skimdb.npmjs.com/registry/
  edunpm ----- http://registry.enpmjs.org/

Npm相关命令

npm install

npm管理的项目在备份和传输的时候一般不携带node_modules文件夹

安装会自动在项目目录下添加 package-lock.json文件，这个文件帮助锁定安装包的版本

根据package.json中的配置下载依赖，初始化项目

npm install 包名

默认安装最新版的依赖包

模块安装的位置：项目目录\node_modules

同时依赖包会被添加到package.json 文件中dependencies节点下

默认参数：--save  简写  -S  将当前依赖保存在dependencies节点下

npm install 包名@版本号

下载特定版本的依赖

npm install --save-dev 库名 简写npm i -D 包名

下载开发依赖

使用 -D参数将依赖添加到devDependencies节点

devDependencies节点：开发时的依赖包，项目打包到生产环境的时候不包含的依赖

npm install --global 包名 简写npm install -g 包名

全局安装

Node.js全局安装的npm包和工具的位置：用户目录\AppData\Roaming\npm\node_modules

一些命令行工具常使用全局安装的方式

npm update 包名

更新包，更新到最新版本

npm update -g 包名

全局更新

npm uninstall 包名

卸载包

npm uninstall -g 包名

全局卸载

三、模块化

模块化规范分类

CommonJS模块化规范（基于ES6语法之前）

ES6模块化规范（使用ES6语法）

ES6模块化规范

ES6使用 export 和 import 来导出、导入模块

导出模块

创建导出模块a.js

export default {
    add(a,b){
        return a+b;
    }
}

导入模块

在模块b.js中导入模块a.js

import myFun from './a'
// import {aFun,bFun} from './a'

 let res=myFun.add(1,2)
 
 console.log(res);

执行测试

执行node b.js，程序无法运行，因为ES6的模块化无法在Node.js中执行，需要用Babel编辑成ES5后再执行

PS D:\WorkSpace\VsCode\npm-project> node b.js
(node:36048) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
D:\WorkSpace\VsCode\npm-project\b.js:1
import myFun from './a'
^^^^^^

SyntaxError: Cannot use import statement outside a module

Babel转码

ES6的某些高级语法在浏览器环境甚至是Node.js环境中无法执行。此时就需要使用Babel转码 。

Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行执行。

安装Babel转码工具

Babel提供babel-cli工具，用于命令行转码。

npm install -g babel-cli

babel --version

配置.babelrc

Babel的配置文件是.babelrc，存放在项目的根目录下，该文件用来设置转码规则和插件，presets字段设定转码规则

{
"presets": ["es2015"],
"plugins": []
}

安装转码器

npm install -D babel-preset-es2015

转码

整个目录转码，--out-dir 或-d参数指定输出目录

babel src -d dist
     
src\a.js -> dist\a.js
src\b.js -> dist\b.js

转码后执行测试

node dist/b.js

3

四、webpack

Webpack 是一个前端资源的打包工具，它可以将js、image、css等资源当成一个模块进行打包。

使用webpack的好处

1、模块化开发

程序员在开发时可以分模块创建不同的js、 css等小文件方便开发，最后使用webpack将这些小文件打包成一个文件，减少了http的请求次数。

webpack可以实现按需打包，为了避免出现打包文件过大可以打包成多个文件。

2、 编译JavaScript、ES6等高级js语法

随着前端技术的强大，开发中可以使用javascript的很多高级版本，比如：typescript、ES6等，方便开发，webpack可以将打包文件转换成浏览器可识别的js语法。

3、CSS预编译

webpack允许在开发中使用Sass 和 Less等原生CSS的扩展技术，通过sass-loader、less-loader将Sass 和 Less的语法编译成浏览器可识别的css语法。

安装webpack

webpack基于node.js运行，所以需要先安装node.js。

npm install -g webpack webpack-cli

npm install -g webpack
npm install -g webpack-cli

cmd状态输入webpack验证是否安装成功

C:\Users\JackChen>webpack -v
webpack: 5.65.0
webpack-cli: 4.9.1
webpack-dev-server not installed

注意：若执行webpack -v命令总是提示安装webpack-cli，需保证webpack与webpack-cli是采用相同安装方式。

初始化项目

npm init -y

创建Js模块

使用CommonJS模块化方式，这种方式不支持ES6的语法，所以不需要Babel转码

创建c.js模块

module.exports.addFun=function(a,b) {
    return a+b;
}

创建d.js模块

exports.hello=function(str) {
    document.write(str);
}

单个方法导出

var addFun=function(a,b) {
    return a+b;
}

module.exports.addFun= addFun;

多个方法导出

var addFun=function(a,b) {
    return a+b;
}

var hello=function(str) {
    document.write(str);
}
module.exports ={addFun,hello};

定义main.js

在项目目录下创建main.js，main.js是本程序的js主文件

const {addFun} = require("./c");
const d = require("./d");

const res1=addFun(2,5);

d.hello("Hello Webpack. 5+3="+addFun(5,3))

Js打包

创建配置文件

项目根目录下创建配置文件webpack.config.js，webpack.config.js是webpack的配置文件。在此文件中可以配置应用的入口文件、输出配置、插件等

const path = require("path") //Node.js内置模块

module.exports = {
    entry: './src/main.js', //配置入口文件
    output: {
        path: path.resolve(__dirname, './dist'), //输出路径，__dirname：当前文件所在路径
        filename: 'bundle.js'//输出文件
    }
}

读取项目src文件夹中的main.js（入口文件）内容，分析资源依赖，把相关的js文件打包

打包后的文件放入当前目录的dist文件夹下

打包后的js文件名为bundle.js

执行编译命令

使用webpack对这些js文件进行打包，执行后查看bundle.js ，里面包含了上面两个js文件的内容并进行了代码打包

PS D:\WorkSpace\VsCode\npm-project> webpack --mode=development
asset bundle.js 2.87 KiB [emitted] (name: main)
./src/main.js 160 bytes [built] [code generated]
./src/c.js 57 bytes [built] [code generated]
./src/d.js 58 bytes [built] [code generated]
webpack 5.65.0 compiled successfully in 135 ms

可修改package.json文件，配置项目的npm运行命令

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack --mode=development",
    "prod": "webpack --mode=production"
  },

运行npm命令执行打包

npm run dev #开发打包

npm run prod #生产打包

创建入口页面

创建index.html，引用bundle.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
<div>
  
</div>
</body>
<script src="./dist/bundle.js"></script>
<script>
</script>
</html>

执行测试

访问index.html

CSS打包

Webpack本身只能处理JavaScript模块，如果要处理其他类型的文件，就需要使用Loader进行转换。Loader可以理解为是模块和资源的转换器。

安装相关Loader插件

css-loader是将css装载到javascript

style-loader是让javascript认识css

npm install -D style-loader css-loader 

修改webpack.config.js

const path = require("path") //Node.js内置模块

module.exports = {
    entry: './src/main.js', //配置入口文件
    output: {
        path: path.resolve(__dirname, './dist'), //输出路径，__dirname：当前文件所在路径
        filename: 'bundle.js'//输出文件
    },
    module: {
        rules: [
            {
                test: /\.css$/,    //打包规则应用到以css结尾的文件上
                use: ['style-loader', 'css-loader']
            }
        ]
    }
}

创建style.css

#my-css{
    border: solid 1px;
    width: 300px;
    height: 150px;
    }

main.js引入css

修改d.js文件

exports.hello=function(str) {
    document.write("<div id=my-css>"+str+"</div>");
}

main.js引入style.css

const {addFun} = require("./c");
const d = require("./d");
require('./style.css')

const res1=addFun(2,5);

d.hello("Hello Webpack. 5+3="+addFun(5,3))

执行运行编译命令

执行运行编译命令：npm run dev，前提是在package.json进行配置，否则使用webpack --mode=development

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack --mode=development",
    "prod": "webpack --mode=production"
  },

PS D:\WorkSpace\VsCode\npm-project\src> npm run dev
Debugger attached.

> npm-project@1.0.0 dev D:\WorkSpace\VsCode\npm-project
> webpack --mode=development

Debugger attached.
asset bundle.js 23.8 KiB [compared for emit] (name: main)
runtime modules 937 bytes 4 modules
cacheable modules 9.99 KiB
  modules by path ./node_modules/ 8.07 KiB
    modules by path ./node_modules/style-loader/dist/runtime/*.js 5.75 KiB 6 modules
    modules by path ./node_modules/css-loader/dist/runtime/*.js 2.33 KiB
      ./node_modules/css-loader/dist/runtime/noSourceMaps.js 64 bytes [built] [code generated]
      ./node_modules/css-loader/dist/runtime/api.js 2.26 KiB [built] [code generated]
  modules by path ./src/ 1.92 KiB
    modules by path ./src/*.js 304 bytes
      ./src/main.js 162 bytes [built] [code generated]
      ./src/c.js 57 bytes [built] [code generated]
      ./src/d.js 85 bytes [built] [code generated]
    modules by path ./src/*.css 1.62 KiB
      ./src/style.css 1.11 KiB [built] [code generated]
      ./node_modules/css-loader/dist/cjs.js!./src/style.css 520 bytes [built] [code generated]
webpack 5.65.0 compiled successfully in 835 ms
Waiting for the debugger to disconnect...
Waiting for the debugger to disconnect...
PS D:\WorkSpace\VsCode\npm-project\src> 

执行测试