Node.js介绍

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

Node.js，使用非阻塞的，事件驱动的I/O操作来保持在处理跨平台 (across distributed devices) 数据密集型实时应用时的轻巧高效。简单地说，Node.js就是运行在服务端的JavaScript。安装略过。

NPM（Node package Manager）

Node.js包管理工具，是全球最大的模块生态系统，里面所有的模块都是开源免费的，也是Node.js的包管理工具，相当于前端的 Maven （ Java ）。安装略过。

NPM官方管理的包下载：，配置成淘宝NPM镜像：，速度提升。

经过下面的配置，所有的npm install都会经过淘宝的镜像地址去下载：

查看npm配置信息：

npm config list

npm安装命令（npm install命令）：

 #使用 npm install 安装依赖包的最新版，模块安装的位置：项目目录node_modules
#安装会自动在项目目录下添加 package-lock. json 文件，这个文件帮助锁定安装包的版本的
#同时package.json文件中，依赖包会被添加到dependencies节点下，类似java中maven的<dependencies>
npm install jquery

#npm管理的项目在备份和传输的时候一般不携带node_modules文件夹
#根据package.json中的配置下载依赖，初始化项目
npm install 

#如果安装时指定特定版本
npm install jquery@.1.x

#devDependencies节点：开发时的依赖包，项目打包到生产环境的时候不包含的依赖
#使用 -D参数将依赖添加到devDependencies节点
npm install --save-dev eslint
#或
npm install -D eslint

#全局安装
#Node.js全局安装的npm包和工具的位置：用户目录AppDataRoamingnpmnode_modules
#一些命令行工具常使用全局安装的方式
npm install -g webpack 

npm其它命令

 #更新包（更新到最新版本）
npm update 包名

#全局更新
npm update -g 包名

#卸载包
npm uninstall 包名

#全局卸载
npm uninstall -g 包名 

Babel转码器

Babel，一个工具链，主要用于将ES6（ECMAScript 2015）+版本的代码转换为向后兼容的 JavaScript语法，以便能够运行在当前和旧版本的浏览器或其他环境中。

Babel的安装：

npm install –global babel-cli

查看版本（是否安装成功）：

babel –version

Babel的使用案例：

1、初始化项目：

npm init -y

2、创建文件（src/demo.js）

 let input = [, 2, 3]
input = input.map(item => item +)
console.log(input) 

3、配置.babelrc（项目根新建文件：.babelrc）

 # 文件的格式：
{
    "presets": [],
    "plugins": []
}

# 这里配置，presets字段设定转码规则，将es规则加入 .babelrc
{
    "presets": [
        "es"
    ],
    "plugins": []
} 

4、安装转码器（在项目中安装）

npm install –save-dev babel-preset-es2015

5、执行转码

 # 转码结果写入一个文件
mkdir dist
# --out-file 或 -o 参数指定输出文件
babel src/demo.js --out-file dist/compiled.js
# 或者
babel src/demo.js -o dist/compiled2.js

# 整个目录转码
mkdir dist
# --out-dir 或 -d 参数指定输出目录
babel src --out-dir dist
# 或者
babel src -d dist 

这里执行：babel src -d dist

6、网页测试（项目根目录新建demo.html）

 <script src="dist/demo.js"></script> 

模块化

Javascript模块化编程，已经成为一个迫切的需求，理想情况下，开发者只需要实现核心的业务逻辑，其它都可以加载已经写好的模块。Javascript不是一种模块化编程语言，不支持”类”（class），包（package），”模块”（module）等概念。

模块化规范：CommonJS模块化规范和ES6模块化规范。

CommonJS模块规范

CommonJS中使用exports和require来导出、导入模块。

1、工程中创建文件（src/module/common.js）

 // 定义成员：
const sum =  function  (a, b) {
    return parseInt(a) + parseInt(b)
}
const subtract = function (a, b) {
    return parseInt(a) - parseInt(b)
}
const multiply = function (a, b) {
    return parseInt(a) * parseInt(b)
}
const divide = function (a, b) {
    return parseInt(a) / parseInt(b)
}

// 导出成员
module.exports = {
    sum: sum,
    subtract: subtract,
    multiply: multiply,
    divide: divide
} 

2、工程中创建文件（src/demo.js）

 //引入模块，注意：当前路径必须写 ./ .js可以不写
const m = require('./module/common.js')
console.log(m)
const result = m1.sum(1, 2)
const result = m1.subtract(1, 2)
console.log(result, result2) 

3、运行

node src/demo.js

ES6模块化规范

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

1、工程中创建文件（src/module/userApi.js）

 export function getList() {
    console.log('获取用户数据列表')
}

export function save() {
    console.log('保存用户数据')
} 

2、工程中创建文件（src/demo.js）

 //只取需要的方法即可，多个方法用逗号分隔
import { getList, save } from "./module/userApi.js"
getList()
save() 

3、运行

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

 # 配置已省略
babel src -d dist

#执行
node dist/demo.js 

ES6模块化的另一种写法

1、工程中创建文件（src/module/userApi.js）

 export default {
    getList() {
        console.log('获取用户数据列表')
    },
    save() {
        console.log('保存用户数据')
    }
} 

2、工程中创建文件（src/demo.js）

3、运行

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

 # 配置已省略
babel src -d dist

#执行
node dist/demo.js 

Webpack模块打包器

Webpack是一个前端资源加载/打包工具，模块打包器。主要目标是将JavaScript文件打包在一起，打包后的文件用于在浏览器中使用，基于node 。

官方，一个用于现代JavaScript应用程序的静态模块打包工具。当webpack处理应用程序时，它会在内部构建一个依赖图（dependency graph），此依赖图对应映射到项目所需的每个模块，并生成一个或多个bundle。

Webpack安装

 #全局安装
npm install -g webpack webpack-cli

#查看版本号
webpack -v 

JS打包，应用案例

1、工程中创建文件（src/common.js）

 exports.info = function (string) {
    document.write(string);
} 

2、工程中创建文件（src/utils.js）

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

3、工程中创建文件（src/main.js）

 const common = require('./common');
const utils = require('./utils');
common.info('Hello Webpack!  -->' + utils.add(, 20000)); 

4、JS打包，工程中创建文件（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' //输出文件
    }
} 

5、命令行执行编译命令

 #有黄色警告
webpack 

#没有警告
webpack --mode=development 

#执行后查看bundle.js里面包含了上面两个js文件的内容并惊醒了代码压缩 

配置项目的npm运行命令执行，配置package.json文件，scripts中添加，如下：

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

运行命令：

npm run dev

6、验证，工程中创建文件（index.html）

 <body>
    <script src="dist/bundle.js"></script>
</body> 

浏览器中参看，输出内容： Hello Webpack! –>30000

css 打包，应用案例

1、安装style-loader和 css-loader

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

css-loader是将css装载到javascript；style-loader是让javascript认识css；

npm install –save-dev style-loader css-loader

2、修改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']
            }
        ]
    }
} 

3、工程中创建文件（src/style.css）

 body{
    background:rgb(, 243, 129);
} 

4、工程中修改文件（src/main.js）

 const common = require('./common');
const utils = require('./utils');
common.info('Hello Webpack!  -->' + utils.add(, 20000));

require('./style.css'); 

5、运行命令

npm run dev

6、验证，工程中创建文件（index.html）

 <body>
    <script src="dist/bundle.js"></script>
</body> 

7、效果