3.前端Node.js

一、基本概念

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

二、模块系统

        为了让Node.js的文件可以相互调用，Node.js提供了一个简单的模块系统。模块是Node.js 应用程序的基本组成部分，文件和模块是一一对应的。换言之，一个 Node.js 文件就是一个模块，这个文件可能是JavaScript 代码、JSON 或者编译过的C/C++ 扩展。

        对于一个模块，其内部的变量和方法对外都是不可见的。Node.js 提供了 exports 和 require 两个对象，其中 exports 是模块共享的对象，require 用于从外部获取一个模块的共享对象，即所获取模块的 exports 对象。

const util=require('util');//获取共享对象
module.exports={};//设置共享对象

        exports 和 module.exports 的使用：如果要对外暴露属性或方法，就用 exports 就行，要暴露对象就用 module.exports。

三、NPM

        NPM是随同Node.js一起安装的包管理工具，能解决Node.js代码部署上的很多问题，常见的使用场景有以下几种：

• 允许用户从NPM服务器下载别人编写的第三方包到本地使用。
• 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
• 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。

        下载好之后，下载包就放在了工程目录下的 node_modules 目录中，在 package-lock.json 配置文件中会记录所有下载包的信息，NPM下载和删除包的语法：

//下载时添加-D参数可将包设置为开发依赖
//下载时添加-g参数可将包设置为全局包
npm install {module_name}@{module_version}
npm uninstall {module_name}

         在项目根目录中，需要创建一个 package.json 包管理配置文件用来记录项目信息及所需依赖，从而在删除 node_modules 目录后方便共享。package.json创建语句：

npm init -y

四、ES6

        ES6，全称 ECMAScript 6.0，是 JavaScript 的下一个版本标准，2015.06 发版。ES6 主要是为了解决 ES5 的先天不足，比如 JavaScript 里并没有类的概念，但是目前浏览器的 JavaScript 是 ES5 版本，大多数高版本的浏览器也支持 ES6，不过只实现了 ES6 的部分特性和功能。以下介绍 ES6 的部分特性。

        1.let 和 const：let 声明的变量只在 let 命令所在的代码块内有效。const 声明一个只读的常量，一旦声明，常量的值就不能改变。

        2.模板字符串：模板字符串相当于加强版的字符串，用反引号 `,除了作为普通字符串，还可以用来定义多行字符串，还可以在字符串中加入变量和表达式。注意：模板字符串中的换行和空格都是会被保留的。

let name = "Mike";
let age = 27;
let info = `My Name is ${name},I am ${age+1} years old next year.`
console.log(info);
// My Name is Mike,I am 28 years old next year.

        3.类：在ES6中，class (类)作为对象的模板被引入，可以通过 class 关键字定义类。class 的实例化必须通过 new 关键字。

//类定义，定义属性和方法时无需使用关键字，且必须在访问前对类进行定义
class Class{
    a=1;
    b='123';
    f(){
        console.log('This is a class');
    }
};
let c=new Class();

        4.对象解构：解构赋值是对赋值运算符的扩展。他是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。

let obj={
    a:1,
    b:'123',
    c:true,
    f:function(){
        console.log('f');
    }
};
//可直接获取对象的一个或多个属性及方法,变量名需要对应
let {a,b,c,f}=obj;
console.log(a);
console.log(b);
console.log(c);
f();

        5.对象传播：拓展运算符（...）用于取出参数对象所有可遍历属性然后拷贝到当前对象。

let person = {name: "Amy", age: 15};
let p1 = { ...person };
console.log(p1);
//属性名相同时,前面的会被覆盖
let p2 = { ...person,name: "Lucy"};
console.log(p2);

        6.模块规范：ES6 引入了模块化，其设计思想是在编译时就能确定模块的依赖关系，以及输入和输出的变量。ES6 的模块化分为导出（export）与导入（import）两个模块。

//导入对象
import util from 'util'
//导出对象
export default{
}

五、babel

        babel 是一款 JavaScript 编译器，它可以把 ECMAScript 2015+ 的代码转译成低版本兼容的代码。

        全局安装：

npm install -g babel-cli 
npm install -D babel-preset-es2015

        转码：

//首先需要在项目目录下创建.babelrc配置文件
{
    //目标版本
    "presets":["es2015"],
    "plugins": []
}

//执行命令
babel {dir_name|file_name} -d {out_dir} -o {out_file}

六、webpack

        webpack 是一个前端资源打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

        全局安装：

npm install -g webpack webpack-cli

        打包js：

//在项目目录下创建配置文件webpack.config.js
//导入path模块
const path=require('path');
module.exports={
    //打包的入口函数
    entry:'',
    output:{
        //打包路径
        path:path.resolve(__dirname,''),
        //生成文件名
        filename:''
    }
}

//执行命令
webpack

        打包css：

//打包css需要先下载两个包
npm install -g style-loader css-loader

//修改配置文件
//导入path模块
const path=require('path');
module.exports={
    //打包的入口函数
    entry:'',
    output:{
        //打包路径
        path:path.resolve(__dirname,''),
        //打包名
        filename:''
    },
    module: {
        rules: [{
            //打包规则应用到以css结尾的文件上
            test: /\.css$/,
            use: ['style-loader', 'css-loader']
        }]  
    }
}

//执行命令
webpack