初始ES6-Webpack

Posted 2020-12-27 Bk小凯笔记

ES6语法特性
变量和常量：let表示变量，const表示常量，let和const都是块级作用域；如一个函数内部、一个代码块内部{}
let的作用域是所在代码块，不会被提升到当前函数的顶部
const声明的变量必须提供一个值

字符串:
模板字符
1.用${},将表达式嵌入字符串中进行拼接。
//es5
console.log(‘hello‘+name)
//es6
console.log(‘hello ${name}‘)
2.ES5通过反斜杠来做多行或一行行字符串拼接，
ES6通过反引号‘‘直接搞定。
//es5
var msg = "wanglukai"
const template = ‘<div><span>wanglukai</span><div>‘
作用域：{}

函数：
默认参数
function action(num = 200){
console.log(num)
}

箭头函数
不需要function关键字来创建函数
省略return关键字
继承当前上下文的this关键字

语法：ES6:()=>{},ES5:function(){}

细节：
当函数仅有一个参数的时候，是可以省略掉括号的
当函数返回仅有一个表达式的时候，可以省略{}和return;
如：
//参数name没有括号
var people = name => ‘hello‘ + name
//参考
var people = (name,age) =>{
const fullName = ‘hello‘ + name
return fullName
}
键值对重名，
ES5简写：
function people(name,age){
return{
name:name,
age:age
}
}
const people = {
name:‘wang‘,
getName:function(){
console.log(this.name)
}
}
ES6简写:
function people(name,age){
return{
name,
age
}
}
const people = {
name:‘wang‘,
getName(){
console.log(this.name)
}
}
Object.assign()这个方法实现浅复制

解构-数据访问：
ES6新增了解构，这是将一个数据结构分解为更小部分的过程。
解构能让我们从对象或者数组里取出数据存为变量，
ES5提取对象信息如下：
const people = {//对象
name : ‘wang‘,
age : 24
}
const name = people.name
conse age = people.age
console.log(name+"---"+age)

ES6提取对象信息如下:
const people = {//对象
name : ‘wang‘
age : 24
}
const {name,age} = people
console.log("${name}---${age}")

const color = [‘red‘,‘blue‘]//数组
const [r,b] = color
console.log("${r}---${b}")

var [x,y]=getVal(),//函数返回值的解构

Spread Operator展开运算符
组装 对象或数组
const color = [‘wang‘,‘lu‘]//数组
const colorone [...color,‘kai‘]
console.log(colorone)

const wanglukai = {name : ‘王路凯‘,age : 24}
const wanglukaione = {...wanglukai,sex:‘男‘}
console.log(wanglukaione)

import和export
import导入模块，export导出模块
//全部导入
import people from ‘./example‘
//部分导入
import {name,age} from ‘./example‘
//默认导出，注只能有一个默认,但可以有多个export。
export default App
//部分导出
export class App extend Component{};

1.当用export default people导出时，就用 import people 导入（不带大括号）

2.一个文件里，有且只能有一个export default。但可以有多个export。

3.当用export name 时，就用import { name }导入（记得带上大括号）

4.当一个文件里，既有一个export default people, 又有多个export name 或者 export age时，导入就用 import people, { name, age }

5.当一个文件里出现n多个 export 导出很多模块，导入时除了一个一个导入，也可以用import * as example

 

Promise:用同步的方式去写异步代码（处理异步操作的一种模式）
//发起异步请求
fetch(‘/api/todos‘)
.then(res => res.json())
.then(data => ({data}))
.catch(err => ({err}));

var promise = new Promise(function (resolve,reject) {
//进行一些异步或耗时操作
if(/*如果成功*/){
resolve("Stuff worked!");
}else {
reject(Error(‘It broke‘));
}
})

//绑定处理程序
promise.then(function (result) {
//promise成功的话会执行这里
console.log(result);// "Stuff worked!"

},function (err) {
//promise失败会执行这里
console.log(err); // Error: "It broke"
})

Generators（生成器）：是个能返回一个迭代器的函数，也是函数的一种
直观表现是比普通function多了个姓星号*,
函数体中可以使用yield关键字，会在每个yidld后暂停
//生成器
function *wang(){
yield 1;
yield 2;
yield 3;
}
//生成器能像函数那样被调用，但会返回一个迭代器
let iterator = wang();
console.log(iterator.next().value);

生成器可以让我们的代码进行等待。就不用嵌套的回调函数。
使用generator可以确保当异步调用在我们的generator函数运行一下行代码之前完成时暂停函数的执行。

咱们也不能手动一直调用next()方法，你需要一个能够调用生成器并启动迭代器的方法。
function run(taskDef){ //taskDef即一个生成器函数

let task = taskDef();//创建迭代器，让它在别处可用

let result = task.next();//启动任务

function step(){ //递归使用函数来保持对 next()的调用

if(!result.done){
result = task.next();
step();
}
}

step(); //开始处理过程
}
实际上却使用 yield 来等待异步操作结束。
----
static

state

class:ES6添加了对类的支持，

for of值遍历
for in 循环用于遍历数组，类数组或对象，
ES6中新引入的for of循环功能相似，不同的是每次循环它提供的不是序号而是值。

var Array = [a‘‘,‘b‘,‘c‘]
for( v of Array){
console.log(v) //输出a,b,c
}

Module 在ES6标准中，javascript原生支持module了。
//point.js
module "point"{
export class Point{
constructor(x,y){
public x =y
public y = y;
}
}
}
//myapp.js
//声明引用的模块
module point from "/point.js";
//尽管声明了引用的模块，还是可以通过指定需要的部分进行导入
import Point from "point";

var origin= new Point(0,0);
console.log(origin);

Map,Set和WeakMap,WeakSet
新加的集合类型，提供了更加方便的获取属性值的方法，
在进行属性值添加与获取时有专门的get，set 方法。

var vm = new WeakMap()
vm.set(s,{extra:42});
vm.add({data : 22})
vm.get(s) == 34;
vm.has == true;
vm.size == undefined

Proxies: Reflect-Proxy可以监听对象的行为,Reflect反射的作用
{
let obj = {
time:‘2017-03-11‘,
name:‘net‘,
_r:123
}

let monitor = new Proxy(obj, {
get(target, key) {
return target[key].replace(‘2017‘, ‘2017‘);
}
})

console.log(‘get‘,monitor.time)

}

Symbols:键通常来说是字符串,还可以用symbol这种值，作为对象的键。
声明的值不相等，保持唯一

新增API：
Numer.EPSILON
Number.isInteger(Infinity)//false
Number.isNaN("NaN")//false

Math.acosh(3)// 1.762747174039086
Math.hypot(3,4)//5
Math.imul(Math.pow(2,32) - 1,Math.pow(2,32) - 2)//2

"abcde".contains("") //true
"abc".repeat(3) //abcabcabc

Array.from(document.querySelectorAll(‘*‘)) // Returns a real Array
Array.of(1,2,3)// Similar to new Array(...), but without special one-arg behavior
[0,0,0].fill(7,1)// [0,7,7]
[1,2,3].findIndex(x => x ==2)// 1
[‘a‘,‘b‘,‘c‘].entries()// iterator [0, "a"], [1,"b"], [2,"c"]
[‘a‘,‘b‘,‘c‘].keys()// iterator 0, 1, 2
[‘a‘,‘b‘,‘c‘].values() // iterator "a", "b", "c"

Object.assign(Point,{origin:new Point(0,0)})
Decorator:修饰器（是函数、修改行为、修改类的行为）
{
let wang = (target,name,descriptor) =>{
descriptor.writable=false;
return descriptor
}

class Test{
@wang
time(){
return ‘2017-3-11‘
}
}

let test = new Test();

test.time = function () {
console.log(‘reset time‘)
}

console.log(test.time())
}

---------------Webpack---------------

Webpack是一个静态模块打包工具，根据依赖关系，将模块按照指定的规则生成对应的静态资源
打包：所有图片、所有样式、所有脚本、所有资源、所有静态文件

为何使用Webpack：
webpack有两种组织模块依赖的方式，同步和异步，异步依赖作为分割点 （将依赖书拆分成按需加载的块：）
webpack使用异步I/O和多级缓存提高运行效率, （初始化加载的耗时尽量少： ）
通过loader转换器，把各种资源类型转换成JavaScript模块，供webpacke处理、（各种静态资源都可以视作模块：）
webpck有一个功能丰富的插件系统。 （自定义打包逻辑的能力：）
无论是单页还是多页的web应用


Vue Webpack Node npm cnpm的关系理解：
1.实际上Vue本身是不依赖Node的，
2.而Vue-cli的脚手架是依赖于Webpack的，所以间接的也需要Node的支持,
3.Webpack基于Node的运行环境,Webpack在执行打包压缩的时候依赖Node,
没有Node就不能使用Webpack,并且支持ES6
4.npm只是nodejs的一个模块,运行在Node上，全称（Node Package Manager）
5.cnpm是淘宝的、只为下载快点
6.node是一个运行在服务器端的js环境

entry入口
语法：const config = {
entry:{
app:‘./src/app.js‘, //注，app和vendors是自定义的
vendors:‘./src/vendors.js‘
}
}

output输出
语法：
const config = {
output:{
filename:‘bunlde.js‘, //filename：用于输出文件的文件名
path:‘/home/proj/public/assets‘ //目标输出目录 path 的绝对路径
}
}
module.exports = config; //引用

模式：告知webpack使用响应模式的内置优化
用法：//分两种模式
module.exports = {
mode:‘production‘//模式1
mode:‘development‘//模式2
}

loader:用于模块的源代码进行转换为js认识的，使用时需安装相应的loader
module.exports = {
module:{
rules:[
{test:/.css$/,use:‘css-loader‘},
{test:/.ts$/,use:‘ts-loader‘}
]
}
}

{
module:{
rules:[
{
test:/.css$/,
use:[
{loader:‘style-loader‘},
{
loader:‘css-loader‘,
options:{
modules:true
}
}
]
}
]
}
}

常用Loader
编译相关：babel-loader、ts-loader
样式相关: style-loader、css-loader、less-loader、postcss-loader
文件相关: file-loader、url-loader

loader 也能够使用 options 对象进行配置。

Plugins插件：目的在于解决loader无法实现的事、可以参与整个打包过程、及其灵活
具有apply属性，且会被webpack compiler调用,
并且compiler对象可在整个编译生命周期访问。

例子：ConsoleLogOnBuildWebpackPlugin.js
const plugiName = ‘ConsoleLogOnBuildWebpackPlugin‘;
class ConsoleLogOnBuildWebpackPlugin{
apply(compiler){
compiler.hooks.run.tap(pluginName,compilation => {
console.log("webpack 构建过程开始");
});
}
}

常用Plugins
//提取代码 //混淆、压缩
优化相关:CommonsChunkPlugin、UglifyjsWebpackPlugin
//提取css、打包单独的 //生成html
功能相关:ExtractTextWebpackPlugin、HtmlWebpackPlugin、
//模块热更新 //帮助拷贝文件
HotModuleReplacementPlugin、CopyWebpackPlugin

config配置
因为webpack配置是Node CommonJS模块，所以可以做到如下：
1.通过require()导入其他文件
2.通过require()使用npm的工具函数
3.使用JS控制流表达式，如：?:
4.对常用值使用变量或常量
5.编写并执行函数来生成部分配置

基本配置
webpack.config.js
var path = require(‘path‘);

module.exports = {
mode:‘development‘,
entry:‘./foo.js‘,
output:{
filename:‘‘,
path:path.resolve(_dirname,‘dist‘)
}
}

 

modules模块

Node和webpack的模块依赖关系，如下;

ES5: import语句
CommonJS: require()语句
AMD: define 和 require
css/sass/less文件中的: @import
样式(url(...))或 HTML 文件(<img src=...>)中的图片链接(image url)

支持模块类型如下：

webpcak通过loader可以支持各种语言 和 预处理器编写模块，
1.CoffeeScript
2.TypeScript
3.ESNext(Babel)
4.Sass
5.Less
6.Stylus

 

搭建本地开发环境：分3中方式
webpack watch mode

webpack-dev-server的功能如下
live reloading
打包文件？No不能、webpack命令打包
路径重定向
https
浏览器中显示编译错误
接口代理
模块热更新

配置：
devServer
inline 默认为true
contentBase 指定内容路径
port 监听端口
historyApiFallback 指定页面规则
https 指定
proxy 远程接口代理
hot 打开模块热更新
openapge 指定最先打开的页面（初始页）
lazy 设置只有访问的资源，才会编译打包
overlay 错误提示、

proxy 和 http-proxy-middleware的参数一样，如下是参数
options
target 指定你代理的地址
changeOrigin设为true 改变 源 到url
headres 增加头信息
logLevel 帮助调试
pathRewrite 帮助重定向请求

express + webpck-dev-middleware

打包结果：
webpack --profile --json | Out-file ‘stats.json‘ - Encoding OEM //打包

http://webpack.github.io/aualyse //Webpcak官方分析工具

安装：
新建文件夹E:Webpack-probject，cmd进入该目录下 npm init初始化，生成package.json文件
E:Webpack-probject该目录下输入 npm install webpack --save-dev
未完...