Nodejs+ES6+NPM+Babel+模块化+webpack
大前端
- 一、Nodejs
- 二、ES6语法规范
-
- 2.1、let与const
- 2.2、模板字符串（连接）
- 2.3、箭头函数
- 2.4、简化对象初始化
- 2.5、数组map()方法
- 2.5、数组reduce()方法
- 三、NPM包管理器
- 四、Babel
-
- 4.1、Babel的介绍与安装
- 4.2、Babel的使用
- 五、模块化
-
- 5.1、CommonJS规范
- 5.2、ES6规范
- 六、webpack
-
- 6.1、webpack概述
- 6.2、webpack安装
- 6.3、webpack合并js
- 6.4、webpack合并css
一、Nodejs
- Nodejs下载链接
- Nodejs是一门服务端的语言，是解释型语言，不需要编译，运行在V8（jvm）引擎中，运行的命令是：node；后缀是js
- 在vscode中终端运行，先保存，可以tab键自动补全
二、ES6语法规范
2.1、let与const
- let与const解决了var的变量穿透和常量修改的问题，还是建议使用var,因为在低版本的浏览器中还是不支持let与const
- 变量穿透问题：本来只能打印0，1，2但是3也被打印出来了，所以用let替代了var
for (var i = 0; i < 3; i++) {
console.log(i);
}
console.log(i);
- 常量修改问题：用var修饰的常量可以被修改，因此用const来代替
var PI = Math.PI;
PI = 123;
console.log(PI)
2.2、模板字符串（连接）
let person = {
name: "小明",
address: "北京市清河街道",
};
let xiaoming1 = "我是" + person.name + "我的地址是" + person.address + "的";
console.log(xiaoming1);
let xiaoming = `ES6语法==我是${
person.name},我的地址是${
person.address}`;
console.log(xiaoming);
2.3、箭头函数
- 普通函数
var arr = [1, 2, 3];
//map()方法，原数组映射成新的数组
var newarr = arr.map(function(ad) {
return ad + 2;
});
console.log(newarr);
- ES6的箭头函数：去掉function,在括号后面加箭头
var sum2 = arr.map((ad) => {
return ad * 6;
});
console.log(sum2);
2.4、简化对象初始化
- 对象属性的key与value一致时，可以省略，对象方法的function可以省略
var name = "小明";
var address = "北京市清河街道";
let test = {
name: name, //可以直接写成name
address: address, //可以直接写成address
goto: function() {
//可以直接写成goto(){}
console.log("脑力搬砖");
},
};
2.5、数组map()方法
- ES6语法map()方法自带循环
- 自动回填到原来的位置
let arr = [1, 2, 3, 4, 5];
let newarr = arr.map((params)=> {
return params * 2;
});
console.log(newarr);
2.5、数组reduce()方法
- reduce()方法会从左到右，依次把数组中的元素用reduce处理，并把处理后的结果作为下一次reduce的第一个参数
//结果为120,把1，2，3，4，5相乘了
let arr = [1, 2, 3, 4, 5];
let newarr = arr.reduce((a, b)=> {
return a * b;
});
console.log(newarr);
三、NPM包管理器
-
NPM全称Node Package Manager,是Node.js包管理工具，相当于Maven，在安装nodejs的时候，就已经把NPM内置集成进去了
-
Nodejs作用：
1.快速构建nodejs工程
2 快速安装第三方依赖 -
在终端初始化工程
npm init -y得到package.json，类似于pom.xml用来管理第三方依赖
-
快速安装第三方模块
npm install 模块名或者npm i 模块名，同时安装多个模块npm install mysql vue jquery,可以指定版本安装npm i [email protected]当不指定版本时默认安装的都是最新版
-
ctrl+c可以终止操作 -
下载的模块与
package.json有什么关系？在package.json中会有install的模块的版本信息，类似于pom.xml,存在版本信息的作用：复用。将一个工程中的package.json复制到里一个工程中，通过cmd,npm install可以把package.json中的依赖全部下载，避免在工程中重复下载，实现复用的效果
-
安装的模块使用：
1 导入模块const jquery=require("jquery");
2 在终端node 文件名.js，后缀js可以省略 -
淘宝镜像加快安装速度：npm install -g cnpm --registry=https://registry.npm.taobao.org
-
卸载模块
npm uninstall jquery
四、Babel
4.1、Babel的介绍与安装
- ES6的一些高级语法无法在Nodejs环境中运行，因此需要Babel降级转码器，将ES6的语法转为ES5的语法，从而在现有的环境中执行
- 安装：在cmd中，输入命令
npm install -g babel-cli - 输入
bable --version查看版本信息
4.2、Babel的使用
- 创建babel工程文件夹
- 初始化项目
npm init -y - 在src目录下创建example.js(是ES6的语法)
//ES6的语法
let name = "小明";
let arr = [1, 2, 3, 4, 5];
let newarr = arr.map((params)=> {
return params * 2;
})
console.log(newarr);
- 配置babel的配置文件
.babelrc
{
"presets":["ES2015"],
"plugins":[]
}
- 安装转换器
npm i --save-dev babel-preset-es2015 - 终端命令行输入
babel src -d dist就会生成ES5语法新的dist文件夹
"use strict";
//ES5的语法
var name = "小明";
var arr = [1, 2, 3, 4, 5];
var newarr = arr.map(function (params) {
return params * 2;
});
console.log(newarr);
- 还有一种自定义脚本方式，替代第六步，在
package.json中加入:"bulid":"babel src -d dist",然后在命令行输入npm run build
五、模块化
- 每个文件是一个模块，有自己的作用域，当想要在别的文件中使用就需要导入导出模块
- 模块化规范分为：CommonJS模块化规范（Nodejs中使用），ES6模块化规范（uniapp,vue中使用）
5.1、CommonJS规范
- 导出：module.exports
//commonJS规范的导出
let sum = function(a, b) {
return a + b;
};
let sub = function(a, b) {
return a - b;
};
module.exports = {
sub,
sum,
}
- 导入：require
//commonJS规范的导入
const test = require("./utils");
console.log(test.sub(7, 6));
console.log(test.sum(7, 6));
5.2、ES6规范
- ES6使用export和import来导入导出模块
- 如下图表示不支持ES6的语法，需要babel打包降级成ES5
- 导出：
export default {
getuserlist() {
console.log("归来仍是少年");
},
};
- 导入：
//user是一个对象
import user from './userlist';
user.getuserlist;
六、webpack
6.1、webpack概述
- webpack是一个打包工具，将js,css打包压缩，可以提高代码的安全性和网站的访问速度。
6.2、webpack安装
- win+R进入cmd中全局安装
npm i -g webpack webpack-cli - 安装后查看版本号
webpack -v
6.3、webpack合并js
- 创建文件夹目录，用vscode打开
- 初始化项目
npm init -y - 创建src目录，存放需要合并的多个js文件
- 创建入口文件
main.js(模块的集中引入) - 根目录下配置
webpack.config.js文件（打包的规则，**一定要在根目录下**） - 在控制台执行
webpack -w命令查看效果(-w是监听的意思)
- main.js入口文件
const util=require("./util");//不需要后缀.js，util是个模块
const common=require("./common");
common.testcom("周天"+util.testutil(3,5));
- webpack.config.js配置文件
const path = require("path");
//js打包的规则
module.exports = {
entry: "./src/main.js",
output: {
//__dirname当前项目的根目录，产生dist文件夹
path: path.resolve(__dirname, "./dist"),
//在dist文件夹下面，打包成的js文件叫bundle.js
filename: "bundle.js",
}
}
- 输入打包命令之后：
6.4、webpack合并css
- webpack默认只处理了javascripte模块，并没有处理其他类型的文件，所以要打包css,就需要安装
style-loader和css-loader - 安装依赖：
npm i --save-dev style-loader css-loader - 在webpack.config.js中配置css打包的规则
module:{
rule:[{
test:/\.css$/,//把项目中所有以css结尾的文件打包
use:["style-loader","css-loader"],//打包方式
}]
- 在src下创建一个css文件
- 在入口文件main.js中导入css文件即可
require("./mystyle.css") - 在控制台输入
webpack -w即可