node.js(二)：webpack，es6语法新特性

最新推荐文章于 2021-01-20 17:41:30 发布

隔叶听风

最新推荐文章于 2021-01-20 17:41:30 发布

阅读量276

点赞数

分类专栏： nodejs 前端 JavaEE学习日志文章标签： js nodejs webpack es es6

本文链接：https://blog.csdn.net/Sakuraaaaaaa/article/details/108165100

版权

JavaEE学习日志同时被 3 个专栏收录

168 篇文章 8 订阅

订阅专栏

前端

29 篇文章 0 订阅

订阅专栏

nodejs

2 篇文章 0 订阅

订阅专栏

node.js

webpack
- 入门程序
es6

webpack

作用：js合并压缩

入门程序

一、准备三个js，分别为两个模块和一个业务
在这里插入图片描述
二、安装webpack

安装webpack核心包

npm install webpack -g

安装webpack-cli，安装了这个才能使用命令行操作webpack

npm install webpack-cli -g

三、创建webpack.config.js文件
在这里插入图片描述
添加js代码

const path = require('path');

module.exports = {
  entry: './src/main.js',  //业务js路径
  output: {
    path: path.resolve(__dirname, 'dist'),  //输出的文件夹名称
    filename: 'bundle.js'   //生成新文件的名称
  }
};

四、打包

webpack

在这里插入图片描述
测试

<!doctype html>
<html>
  <head>
    ...
  </head>
  <body>
    ...
    <script src="bundle.js"></script>
  </body>
</html>

es6

什么是es

编程语言JavaScript是ECMAScript的实现和扩展。ECMAScript是由ECMA（一个类似W3C的标准组织）参与进行标准化的语法规范。

ECMAScript 6.0（以下简称ES6）是JavaScript语言的下一代标准，2015年6月正式发布。它的目标，是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

es6语法

定义变量和常量

一、定义变量

es5定义变量 var：无论在哪定义，都是方法体的全局变量
es6定义变量 let：替换var

es5

function show(flag){
    if(flag){
        var username="zhangsan"
        console.log(username)
    }else{
        console.log(username)
    }
}
show(false)

在这里插入图片描述
es6

function show(flag){
    if(flag){
        //var username="zhangsan"
        let username="zhangsan"
        console.log(username)
    }else{
        console.log(username)
    }
}
show(false)

在这里插入图片描述
二、定义常量

es5：var，常量可被修改
es6：const，常量被修改会报错

//es5定义常类
var username="zhangsan"
username="lisi"
console.log(username)

//es6定义常量 const
const name="zhangsan"
name="lisi"
console.log(name)

在这里插入图片描述

模板字符串

拼接字符串

es5：字符串拼接使用+

//es5
let username = "zhangsan";
let str = "欢迎：" + username + "的到来";
console.log(str);

es6：模板字符串 ··，使用el表达式来拼接参数

let username = "zhangsan";
let str = `欢迎：${username}的到来`;
console.log(str);

在这里插入图片描述

方法默认值

es5：if判断
es6：将参数默认值绑定到方法参数上（语法：参数名=默认值）

//方法默认值
//传递参数，控制台打印参数
//没有传递，控制台打印默认值
function showname(username){
    //es5
    if(username){
        console.log(username);
    }else{
        console.log("默认");
    }
}
showname()
//es6：将参数默认值绑定到方法参数上（语法：参数名=默认值）
function showname2(username="默认值"){
    console.log(username);
}
showname2()

在这里插入图片描述

箭头函数

相当于java的lambda表达式

不需要function
通过参数后添加=>来声明方法
当方法体只有一行，大括号和return可以省略

//箭头函数：定义方法
let add = function(a,b){
    return a+b
}
console.log(add(1,2))

//1.不需要function
//2.通过参数后添加=>来声明方法
let add2 = (a,b) => {
    return a+b
}
console.log(add2(1,2))

//3.当方法体只有一行，大括号和return可以省略
let add3 = (a,b) => a+b
console.log(add3(1,2))

在这里插入图片描述

创建对象

es5：json格式
es6：当返回对象的属性名和方法参数名一致时，可以省略赋值的过程

//es5写法
function people(username,age){
    return {
        username:username,
        age:age
    }
}
let test = people("zhangsan",12);
console.log(test)
//es6：当返回对象的属性名和方法参数名一致时，可以省略赋值的过程
function people2(username,age){
    return {
        username,
        age
    }
}
let test2 = people2("zhangsan",12);
console.log(test2)

在这里插入图片描述

解析对象

es5：let 变量名 = 对象名.属性名
es6：let {属性名,属性名} = 对象;

注意：获取对象中的属性名和定义的变量名一致

//对象解构
//解析对象：获取对象的属性
let people = {
    username:"zhangsan",
    age:13,
    address:"浙江"
}

//es5获取username和age
// let username = people.username;
// let age = people.age;

//es6获取：获取对象中的属性和定义的变量名一致
let {username,age} = people;

console.log(`${username}--${age}`)

扩展函数

又叫三个点函数，可以用于数组或对象的扩展

将colorful在colors的基础上扩展
将teacher在people的基础上扩展

//扩展函数
//扩展数组和对象属性
let colors = ["red","yellow"]
let colorful = [...colors,"blue"]
console.log(colorful)

//扩展对象
let people = {
    username:"zhangsan",
    age:13,
    address:"浙江"
}
let teacher = {
    ...people,
    title:"讲师"
}
console.log(teacher)

在这里插入图片描述

导入和导出

关键字：export和import

作用：弥补了es5中，一次只能导出一个方法的缺点

工具类

//工具类
export default {
    add:function(a,b){
        return a+b;
    },
    sub:function(a,b){
        return a-b;
    }
}

业务import 导入的对象名 from 导入的js路径

//业务代码
//import 导入的对象名 from 导入的js路径
import utils from "./demo9_lib"
utils.add(1,2);
utils.sub(2,1);

发现报错
在这里插入图片描述

注意：在nodejs中，可以使用所有的es6语法，除了import。所以，需要添加babel插件来支持import关键字。

安装bebel插件

一、安装es6转换模块

cnpm install babel‐preset‐es2015 ‐‐save‐dev

二、全局安装命令行工具

cnpm install  babel‐cli ‐g

三、babel转换配置,项目根目录添加.babelrc 文件
在这里插入图片描述
添加内容

{
    "presets":["es2015"]
}

四、使用

babel‐node js文件名

隔叶听风

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
node.js(二)：webpack，es6语法新特性

webpack：入门程序。es6：什么是es，es6语法，定义变量和常量，模板字符串，方法默认值，箭头函数，创建对象，解析对象，扩展函数，导入和导出，安装bebel插件。
复制链接

扫一扫