Es6,webpack(待研究学习)

学习中的小可爱
257 阅读4分钟

ES6

let,const

let不会发生变量提升.声明之前使用的，都会报错。 都可以用来声明变量,他们声明的变量都有块级作用域,const声明的变量不允许修改;

for (let i = 0; i < 2; i++) {
  console.log('g', i)
  for (let i = 0; i < 2; i++) {
    console.log('z', i)
    for (let i = 0; i < 2; i++) {
      console.log('c', i)
    }
  }
}
// g0 z0 c0 c1 z1 c0 c1 g1 z0 c0 c1 z1 c0 c1 
console.log('----')
for (var i = 0; i < 2; i++) {
  console.log('g', i)
  for (var i = 0; i < 2; i++) {
    console.log('z', i)
    for (var i = 0; i < 2; i++) {
      console.log('c', i)
    }
  }
}
// 0 0 0 1

模板字符

var obj = {
    name: "爱学习的小可爱",
    age: 20
}
var str = `我叫${obj.name}`，

我今年${obj.age};

箭头函数

var func = (参数列表) => { 函数体 }

//1. 参数列表如果只有一个参数，小括号可以省略
//2. 函数体如果只有一句话，那么花括号可以省略
//3. 函数体如果只有一句话并且这个句话是return语句的话， 花括号和return关键字都可以省略
注意事项
1.不能作为构造函数使用
2.没有自己的this,访问this的时候,会去外层作用域中查找
3.没有自己的arguments,访问arguments的时候,会去外层作用域中查找

rest参数

function test(...arr){}
和arugments的区别：

1. rest参数是一个真数组，而arguments是伪数组
2. rest参数获取的可以是部分参数，而arguments获取的是全部的参数
rest参数前面还可以声明其他的形参，但是rest参数必须是最后一个参数！

promise

var p = new Promise(function(resolve, reject){
    //如果执行的操作成功了，就通过resolve将当前promise标记为已完成（solved）
    //resolve(data);
     //如果执行的操作失败了，就通过reject将当前promise标记为已失败（rejected
     //rejecte(data);
     
})

//想要在当前promise成功之后做一些事情

p.then(function(data){

})

//想要在当前promise失败之后做一些事情

p.catch(function(data){

})

//一组promise中只需要一个catch

class

lass Person{
    //如果自己不写constructor js会默认生成一个空的constructor
    //如果自己写了，会将空的constructor覆盖掉
    constructor(){
        //这个constructor其实就类似于我们之前自己写的构造函数
        //this指的就是实例对象
        this.key = value;
        this.key1 = value1; 
    }
    //要给对象添加方法，我们可以直接在class中进行书写
    //这个写法，最终的方法其实是加入到当前类构造函数的原型中
    func(){

    }
    //将test作为一个静态成员，也就是加给Person构造函数
    //调用的时候直接 Person.test
    static test(){
    }
}

class的继承

class Person{
    constructor(){
      this.name = "";
        this.age = "";
    }

    func(){

    }
}

class Student extends Person{
    constructor(){
        //在自己的constructor中必须先调用super 父类的构造函数
        super();
    }
}

属性和方法的简写

var name = "";
var obj = {name, func(){}};

结构赋值

var arr = [1, [2, 3]]

var [num1, [num2, num3]] = arr;

var obj = {
    name: "",
    age: 18
}

var {name1: name, age1: age} = obj;

export的用法

export default function(){

}

import anything from "不带.js文件路径"

export var num = 123;
export function func(){}


import {num, func} from "不带.js文件路径"

export var num = 123;
export function func(){}

import * as tools from "不带.js文件路径"

webpack(待研究学习补充)

是支持es6的模块的写法的，但是当前的浏览器不支持

所以想要将用es6方式写的模块代码在浏览器运行起来，要先使用webpack进行打包

webpack将es6转换成es5

babel

es6的一个编译器，这个东西有自己的独立的运行功能 可以下载 babel-cli,来进行es6的代码转换工作！

babel+webpack

  1. 需要的内容

    npm install babel-loader babel-core -D

  2. 配置loader (webpack.config.js)

    module:{ loaders: [ { test: /.js$/, loader: 'babel-loader' } ] }

  3. 配置.babelrc (因为babel-core需要使用到这个配置文件)

presets： babel在进行代码转换的时候，需要遵守一些规则，这些规则有现成的，

babel-preset-es2015

babel-preset-stage-0

babel-preset-stage-1

babel-preset-stage-2

babel-preset-stage-3

上面的这些都不需要再用了，只需要一个即可 babel-preset-env

需要先下载

    npm install babel-preset-env -D

    {
        presets: [
            "env"
        ]
    }

    {
      "presets": [
        ["env", {
          "targets": {
            "browsers": ["last 2 versions", "safari >= 7"]
          }
        }]
      ]
    }

4. 执行webpack 进行打包即可！

## webpack本地安装之后如何执行

webpack官方推荐本地安装
shell
npm install webpack -D

本地安装之后如何运行

  1. package.json中的scripts 我们可以在package.json中的scripts属性中配置一些相应的shell命令 想要运行这些配置好的命令的时候，只需要 npm run 指令的名称 运行命令的时候，npm会自动启动一个shell，将这些命令内容作为shell脚本来使用， 这个shell的path中会自动加入我们当前项目中的 ./node_modules/.bin/
  2. 如果想要在本地安装后执行webpack
    {
        scripts: {
            "dev": "webpack"
        }
    }

直接 npm run dev

avatar
文章
阅读
粉丝