• 22-08-02 西安 尚医通（02）Vscode、ES6、nodejs、npm、Bable转码器、js模块化、webpack

    如何获得分辨内容优劣的能力呢？见真知假！好的看多了，自然就能分辨什么是差的了

    VS Code

    1.下载安装VS Code

    下载地址 Visual Studio Code - Code Editing. Redefined

    安装到没有中文和空格的路径下

    2.推荐安装插件

    3.入门使用VS Code

    代码格式化 ： shift + alt + f

    3.1创建项目

    vscode本身没有新建项目的选项，所以要先创建一个空的文件夹，如front-demo

    然后打开vscode，再在vscode里面选择 File -> Open Folder 打开文件夹，这样才可以创建项目。

     3.2保存工作区

    打开文件夹后，选择“文件 -> 将工作区另存为...”，为工作区文件起一个名字，存储在刚才的文件夹下即可

    3.3新建文件夹和网页

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8. head>
    9. <body>
    10.     <h1>支持一个中国原则~h1>
    11. body>
    12. html>

    3.4自动保存

    点击文件 —》 勾选自动保存  （√）

    3.5以服务器方式打开网页预览

    需要安装“Live Server”插件：

    文件右键 -> Open with Live Server 

    3.6配置用户代码片段

    文件 =>  首选项 => 配置用户代码片段 => 新建全局代码片段/或文件夹代码片段：

    vue-html.code-snippets【后缀不能改】

    1. {
    2.     "vue htm": {
    3.         "scope": "html",
    4.         "prefix": "vuehtml",
    5.         "body": [
    6.             "",
    7.             "\"en\">",
    8.             "",
    9.             "",
    10.             "    \"UTF-8\">",
    11.             "    \"viewport\" content=\"width=device-width, initial-scale=1.0\">",
    12.             "    \"X-UA-Compatible\" content=\"ie=edge\">",
    13.             "    Document",
    14.             "",
    15.             "",
    16.             "",
    17.             "    
      \"app\">",
    18.             "",
    19.             "    
      ",
  • " ",
  • " ",
  • "",
  • "",
  • "",
  • ],
  • "description": "my vue template in html"
  • }
  • }

    • ES6

    ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。

    ES标准中不包含 DOM 和 BOM的定义，只涵盖基本数据类型、关键字、语句、运算符、内建对象、内建函数等通用语法。

    JavaScript由三个部分组成：

    • EMCAScript：描述了JS的语法和基本对象
    • BOM(浏览器对象模型)：用于操作浏览器
    • DOM(文档对象模型)：用于操作页面元素

    1、let声明变量 

    关注俩点：作用域+重复定义

     let作用域：

    1.  	// var 声明的变量  没有局部作用域
    2. 	// let 声明的变量  有局部作用域
    3. 	{
    4. 		var a = 0
    5. 		let b = 1
    6. 	}
    7. 	console.log(a)  // 0
    8. 	console.log(b)  // ReferenceError: b is not defined

    let 只能声明一次

    1. // var 可以声明多次
    2. // let 只能声明一次
    3. var m = 1
    4. var m = 2
    5. let n = 3
    6. let n = 4
    7. console.log(m)  // 2
    8. console.log(n)  // Identifier 'n' has already been declared

    2、const常量 只读+初始化

    关注点：值不可修改（只读），声明时必须初始化

    值不可修改

    1. // 1、声明之后不允许改变    
    2. const PI = "3.1415926"
    3. PI = 3  // TypeError: Assignment to constant variable.

    声明时必须初始化

    1. // 2、一但声明必须初始化，否则会报错
    2. const MY_AGE  // SyntaxError: Missing initializer in const declaration

    3、解构赋值

    数组或对象中的值拆出来，赋值给变量。优点：可以更快的为变量赋值

    数组解构

    1. //1、数组解构
    2. // 传统
    3. let a = 1, b = 2, c = 3
    4.  
    5. // ES6
    6. let [x, y, z] = [1, 2, 3]
    7.  
    8. console.log(x, y, z)

    对象解构

    1. //2、对象解构
    2. let user = {name: 'Helen', age: 18}
    3. // 传统
    4. let name1 = user.name
    5. let age1 = user.age
    6.  
    7. // ES6
    8. let { name, age } =  user//注意：结构的变量必须是user中的属性
    9. console.log(name, age)

    4、模板字符串 

    模板字符串相当于加强版的字符串，用反引号 （   `xxx`  ）,  除了作为普通字符串，还可以用来定义多行字符串，还可以在字符串中加入变量和表达式。

    1、可以当做普通字符串来用

    2、多行字符串

    1. // 1、多行字符串 （用var声明也行）
    2. let string1 =  `Hey,
    3. can you stop angry now?`

    3、在字符串中嵌入变量和表达式。以前是用+拼接

    1. // 2、字符串插入变量和表达式。变量名写在 ${} 中，${} 中可以放入 JavaScript 表达式。
    2. let name = "Mike"
    3. let age = 27
    4.  
    5. let info = `My Name is ${name},I am ${age+1} years old next year.`

    4、调用函数

    1. // 3、字符串中调用函数
    2. function f(){
    3.     return "have fun!"
    4. }
    5.  
    6. let string2 = `Game start,${f()}`

    5、声明对象简写

    1. const age = 12
    2. const name = "Amy"
    3.  
    4. // 传统
    5. const person1 = {age: age, name: name}
    6. console.log(person1)
    7.  
    8. // ES6
    9. const person2 = {age, name}
    10. console.log(person2) //{age: 12, name: "Amy"}

    6、定义方法简写

    1. // 传统
    2. const person1 = {
    3.     sayHi:function(){
    4.         console.log("Hi")
    5.     }
    6. }
    7. person1.sayHi();//"Hi"
    8.  
    9.  
    10. // ES6 简写 省略：function
    11. const person2 = {
    12.     sayHi(){
    13.         console.log("Hi")
    14.     }
    15. }
    16. person2.sayHi()  //"Hi"

    7、对象扩展运算符

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

    拷贝对象

    浅拷贝：复制了一个引用

    深拷贝：复制的是内容（是俩个对象了）

    拷贝对象

    1. // 1、拷贝对象
    2. let person1 = {name: "Amy", age: 15}
    3. //...是深拷贝
    4. let someone = { ...person1 }
    5. console.log(someone)  //{name: "Amy", age: 15}

    合并对象

    1. // 2、合并对象
    2. let age = {age: 15}
    3. let name = {name: "Amy"}
    4. let person2 = {...age, ...name}
    5. console.log(person2)  //{age: 15, name: "Amy"}

    8、箭头函数

    箭头函数提供了一种更加简洁的函数书写方式。基本语法是： 参数 => 函数体

    1. // 当箭头函数没有参数或者有多个参数，要用 () 括起来，一个参数时可以不用()。
    2. // 当箭头函数函数体有多行语句，用 {} 包裹起来，表示代码块，
    3. // 当只有一行语句，并且需要return返回结果时，要去掉 {} , 结果会自动返回。
    4. var f3 = (a,b) => {
    5.     let result = a+b
    6.     return result
    7. }
    8. console.log(f3(6,2))  // 8
    9.  
    10. // 前面代码相当于：
    11. var f4 = (a,b) => a+b

    箭头函数多用于匿名函数的定义

    Node.js

    简单的说 Node.js 就是运行在服务端的 JavaScript。

    通俗来讲：

    （1）nodejs是JavaScript的运行环境，类似于Java中的jdk，使用nodejs可以直接运行js文件

    （2）nodejs可以作为服务器使用，类似tomcat

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

    1、下载与安装Node.js

    官网：Node.js

    中文网：Node.js 中文网

    安装：node-v10.14.2-x64.msi

    安装好之后查看版本

    node集成了npm 

    2、使用nodejs运行js代码

    1、创建js文件，文件内容如下

    console.log('Hello Node.js')

    2、【右键-在集成终端打开】进入到js程序所在的目录

    3、输入命令执行该js文件

    node .\node_demo.js

    3、使用nodejs做服务器

    1、创建一个js文件，内容如下：

    1. const http = require('http'); //引入vue内置对象
    2.  
    3. http.createServer(function (request, response) {
    4.  
    5.     // response.writeHead(200, {'Content-Type': 'text/plain'});
    6.     // 给客户端响应数据 "Hello World"
    7.     response.end('Hello Server');
    8.     
    9. }).listen(8888);

    2、在集成终端中执行运行该js文件

    在浏览器访问测试

    npm包管理器

    npm全称Node Package Manager，是Node.js包管理工具，相当于前端的Maven。

    Node.js已经集成了npm工具，默认安装的npm工具的位置：Node.js目录\node_modules

    1. #在命令提示符输入 npm -v 可查看当前npm版本
    2. npm -v

    1、使用npm管理项目，前三步准备

    1.1创建项目文件夹

    1.2项目初始化

    1. #建立一个空文件夹，在命令提示符进入该文件夹  执行命令初始化
    2. #最后会生成package.json文件，这个是包的配置文件，相当于maven的pom.xml
    3. npm init -y

    项目文件夹下会生成一个package.json

     1.3 修改npm镜像

    NPM官方管理的包 都是 从  npm下载的，但是这个网站在国内速度很慢。

    1. #经过下面的配置，以后所有的 npm install 都会经过淘宝的镜像地址下载
    2. npm config set registry https://registry.npm.taobao.org

    2、使用npm管理项目，核心步骤

    2.1 npm install 命令

    是局部的，但是打包时会包括

    1. #使用 npm install 安装依赖包的最新版
    2. #模块安装的位置：项目目录\node_modules
    3. #安装会自动在项目目录下添加 package-lock.json文件，这个文件帮助锁定安装包的版本
    4. #同时package.json 文件中，依赖包会被添加到dependencies节点下，类似maven中的 
    5. npm install jquery
    6.  
    7.  
    8. #npm管理的项目在备份和传输的时候一般不携带node_modules文件夹
    9. npm install #根据package.json中的配置下载依赖，初始化项目
    10.  
    11.  
    12. #如果安装时想指定特定的版本
    13. npm install jquery@2.2.4

    执行npm install jquery，会多出来一个package-lock.json,进行版本锁定 

    2.2 npm install 局部安装与全局安装

    局部下载的依赖，将来前端工程打包时，是不会包括该依赖的

    1. # 局部安装
    2. #devDependencies节点：开发时的依赖包，项目打包到生产环境的时候不包含的依赖
    3. #使用 -D参数将依赖添加到devDependencies节点
    4. npm install --save-dev eslint
    5. #或
    6. npm install -D eslint
    7.  
    8.  
    9. #全局安装
    10. #Node.js全局安装的npm包和工具的位置：用户目录\AppData\Roaming\npm\node_modules
    11. #一些命令行工具常使用全局安装的方式 AppData是隐藏目录
    12. npm install -g webpack

    全局安装后 npm install -g webpack

     2.3 npm uninstall 卸载包

    1. #局部卸载包
    2. npm uninstall 包名
    3. #全局卸载
    4. npm uninstall -g 包名

    Babel 转码器

    Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码。

    1.安装Babel

    Babel提供babel-cli工具，用于命令行转码。它的安装命令如下

    1. npm install -g babel-cli
    2.  
    3. #查看是否安装成功
    4. babel --version

    2.Babel的使用

    2.1创建一个ES6的文件example.js

    2.2创建配置文件.babelrc

    Babel的配置文件是.babelrc，存放在项目的根目录下，该文件用来设置转码规则和插件。

    presets字段设定转码规则，将es2015规则加入 .babelrc：

    1. {
    2.     "presets": ["es2015"],
    3.     "plugins": []
    4. }

    2015 年 6 月，ES6 的第一个版本发布，正式名称就是《ECMAScript 2015 标准》（简称 ES2015）。

    2016年6月，小幅修订的《ECMAScript 2016 标准》（简称 ES2016）

    3.安装转码器

    npm install --save-dev babel-preset-es2015

    4.转码

    单个文件转码

    1. # -o 参数指定输出文件
    2. babel .\example.js -o .\e.js

    如果你像我一样，

    怎么解决呢

    1、在vscode的终端里获取执行政策： get-ExecutionPolicy

    2、如果得到的政策是restrict，则重新执行政策：set-ExecutionPolicy RemoteSigned

     整个目录下的文件转码

    1. #-d 参数指定输出目录
    2. babel src -d dist2

    JS模块化

    什么是模块化？

    通过把我们的复杂代码按照功能的不同，划分为不同的模块单独维护的这种方式，去提高我们的开发效率，降低维护成本。

    1、CommonJS模块化规范（exports+require）

    每个文件就是一个模块，有自己的作用域。在一个文件里面定义的变量、函数 等等 都是私有的，对其他文件不可见。

    CommonJS使用 exports （有个s） 和require 来导出、导入模块。

    创建a.js,使用exports导出模块 

    1. // 定义成员：
    2. const sum = function(a,b){
    3.     return parseInt(a) + parseInt(b)
    4. }
    5. const subtract = function(a,b){
    6.     return parseInt(a) - parseInt(b)
    7. }
    8.  
    9. //exports.sum = function (str) {
    10. //}
    11.  
    12. //CommonJS导出成员
    13. module.exports = {
    14.     sum,
    15.     subtract
    16. }

    创建b.js，使用require导入模块

    1. //CommonJS引入模块
    2. //const m = require('./a')后缀可以省略
    3. const m = require('./a.js')
    4.  
    5. const result1 = m.sum(1, 2)
    6. const result2 = m.subtract(1, 2)
    7.  
    8. console.log(result1, result2)

    在终端运行b.js

    2、ES6模块化规范（export+import）

    ES6使用 export（没有s）和 import 来导出、导入模块。

    1.修改a.js文件如下：

    1. export function getList() {
    2.     console.log('获取数据列表')
    3. }
    4.  
    5. export function save() {
    6.     console.log('保存数据')
    7. }

    2.修改b.js文件如下：

    1. //只取需要的方法即可，多个方法用逗号分隔
    2. import { getList, save } from "./userApi.js"
    3. getList()
    4. save()

    注意：这时的程序无法运行的，因为ES6的模块化无法在Node.js中执行，需要用Babel编辑成ES5后再执行

    3、转码

    1. #初始化
    2. npm init -y
    3.  
    4. #配置 .babelrc
    5. {
    6.     "presets": ["es2015"],
    7.     "plugins": []
    8. }
    9.  
    10. #安装转码器
    11. npm install --save-dev babel-preset-es2015
    12.  
    13. #新建文件夹 es6模块化/compiled
    14. mkdir compiled
    15.  
    16. #转码  注意：两个文件都要转
    17. babel a.js -o .\compiled\a.js
    18. babel b.js -o .\compiled\b.js

    转码后在终端执行

    3、ES6模块导出、导入的另外一种写法（推荐）

    1、修改a.js,

    1. export default {
    2.     getList() {
    3.         console.log('获取数据列表2')
    4.     },
    5.  
    6.     save() {
    7.         console.log('保存数据2')
    8.     }
    9. }

    2、修改b.js，

    1. import user from "./a.js"
    2. user.getList()
    3. user.save()

    对a.js和b.js转码后，再执行转码后的b.js文件，如下

    Webpack打包工具

    Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。 

    1.Webpack全局安装

    npm install -g webpack webpack-cli

    2.使用Webpack打包JS文件到一个bundle.js

    2.1创建webpack目录，在终端执行项目初始化命令

    npm init -y

    2.2创建src文件夹，在其下创建common.js、utils.js、main.js

    1. //common.js文件内容
    2. exports.info = function (str) {
    3.     document.write(str); //写入到浏览器页面
    4. }
    1. //utils.js文件内容
    2. exports.add = function (a, b) {
    3.     return a + b;
    4. }
    1. //main.js 文件内容
    2. const common = require('./common');
    3. const utils = require('./utils');
    4.  
    5. common.info('Hello world!' + utils.add(100, 200));

    2.3 创建webpack.config.js

    读取当前项目目录下src文件夹中的main.js（入口文件）内容，分析资源依赖，把相关的js文件打包，打包后的文件放入当前目录的dist文件夹下，打包后的js文件名为bundle.js

    1. const path = require("path"); //Node.js内置模块
    2. module.exports = {
    3.     entry: './src/main.js', //配置入口文件
    4.     output: {
    5.         path: path.resolve(__dirname, './dist'), //输出路径，__dirname：当前文件所在路径
    6.         filename: 'bundle.js' //输出文件
    7.     }
    8. }

      在webpack.config.js目录下执行打包命令 webpack

    1. webpack 
    2. #执行后查看bundle.js 里面包含了上面两个js文件的内容并进行了代码压缩（也就是跑到一行去）

    3.使用Webpack打包Js文件和Css文件

    Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。

    css-loader 是将 css 装载到 javascript；

    style-loader 是让 javascript 认识css

    3.1安装style-loader和 css-loader

    npm install --save-dev style-loader css-loader

    3.2修改webpack.config.js

    1. const path = require("path"); //Node.js内置模块
    2. module.exports = {
    3.     entry: './src/main.js', //配置入口文件
    4.     output: {
    5.         path: path.resolve(__dirname, './dist'), //输出路径，__dirname：当前文件所在路径
    6.         filename: 'bundle.js' //输出文件
    7.     },
    8.     //在output:{...} 下面追加module配置          
    9.     module: {
    10.         rules: [
    11.             {
    12.                 test: /\.css$/,    //打包规则应用到以css结尾的文件上
    13.                 use: ['style-loader', 'css-loader']
    14.             }
    15.         ]
    16.     }
    17. }

    3.3在src目录下创建style.css,内容如下

    1. body{
    2.     background:pink;
    3. }

    3.4在main.js中引入这个css文件，第一行

    require('./style.css');

    3.5重新打包webpack

     在浏览器查看index.html

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8. head>
    9. <body>
    10.     <script src="dist/bundle.js">script>
    11. body>
    12. html>

  • 相关阅读:
    短剧app系统开发（对接广告联盟）源码搭建
    HTML5的 WebSocket， wedworker，RPC模拟的介绍和使用
    电容笔和触控笔有什么区别？ipad电容笔口碑好的品牌推荐
    数据结构-----二叉树的基本操作
    防火墙命令大全
    并发编程带来的安全性挑战之同步锁
    【linux c/c++开发】零声教育新班开播（原理讲解+源码分析+案例分析+上线项目））
    【网络技术】TCP详解
    LeetCode刷题---141. 环形链表（双指针-滑动窗口）
    【Vivado】Xilinx UG994 Addressing for Block Designs
  • 原文地址：https://blog.csdn.net/m0_56799642/article/details/126116828