babel

前言 2020年即将到来,在众多前端的招聘要求里, webpack 、 工程化 这些字眼频率越来越高。日常开发者中，我们常常在用诸如 vue-cli 、 create-react-app 的脚手架来构建我们的项目。但是如果你想在团队脱颖而出(鹤立鸡群)、拿到更好的offer(还房贷)，那么你必须去深刻的认识下我们经常打交道的 webpack 本文共分为三个部分带你快速掌握webpack，阅读本篇大概需要60分钟。如有不足之处，恳请斧正 本文编写基于 webpack 4.41.2 版本 node: 10.15.3 版本 1 入门(一起来用这些小例子让你熟悉webpack的配置) 1.1 初始化项目 新建一个目录，初始化npm npm init webpack是运行在node环境中的,我们需要安装以下两个npm包 npm i -D webpack webpack-cli npm i -D 为npm install --save-dev的缩写 npm i -S 为npm install --save的缩写 新建一个文件夹 src ,然后新建一个文件 main.js ,写一点代码测试一下 console . log ( 'test 1...' ) 配置package.json命令 "scripts" : { "build" : "webpack src/main.js" } , 执行

babel 的包的构成 核心包 babel-core: babel 转译器本身，提供了 babal 的转译 API，如 babel.transform 等，用于对代码进行转译 babylon: js 的词法解析器（babel 7.x 重命名为 @babel/parser） babel-traverse: 用于对 AST 的遍历，主要给 plugin 用 babel-generator: 根据 AST 生成代码 功能包 babel-types: 用于检验、构建和改变 AST 树的节点 babel-template: 辅助函数，用于从字符串形式的代码来构建 AST 树节点 babel-helpers: 一系列预制的 babel-template 函数，用于提供给一些 plugins 使用 babel-core-frames: 用于生成错误信息，打印出错误点源代码帧以及指出出错位置 babel-plugin-xxx : babel 转译过程中使用到的插件，其中 babel-plugin-transform-xxx 是 transform 步骤使用的 babel-preset-xxx : transform 阶段使用到的一系列的 plugin babel-polyfill : JS 标准新增的原生对象和 API 的 shim，实现上仅仅是 core-js 和 regenerator

①新建项目：新建一个es6文件夹，es6下有src和dist文件夹，现在我在src下新建一个index.js，里面写一些es6代码，我后面要将src下的es6转到dist中变成es5　　 ②初始化项目：es6文件夹下打开终端，输入npm init ，一路回车，此时会在src下生成package.json文件 ③安装babel工具（安装的过程中会有报错，不要管它）： npm install -g babel-cli npm install --save-dev babel-preset-es2015 babel-cli 安装完后，package.json中会多了devDependencies选项： ④在es6下新建.babelrc文件，并输入以下代码： { "presets": ["es2015"], "plugins": [] } ⑤es6终端下输入转换命令：babel src --out-dir dist ⑥简化转换命令：修改package.json中的别名 现在，只需要如下命令就可以编译了： 　　npm run build 来源： https://www.cnblogs.com/wuqilang/p/12188038.html

我们直接创建一个工程，然后执行: npm install -D @babel/cli 我们用的是最新版本7.8.0 创建一个test1.js测试： /* test.js */ const fn = () => {} new Promise(() => {}) class Test {} const c = [1, 2, 3].includes(1) //测试插件1 var a=10; 创建一个babel配置文件.babelrc（先不写任何配置）： /* .babelrc */ { } 然后我们执行： npx babel test1.js -o test1.babel.js --config-file .babelrc 最后看一下结果test1.babel.js： /* test.js */ const fn = () => {}; new Promise(() => {}); class Test {} const c = [1, 2, 3].includes(1); //测试插件1 var a = 10; 哦？为啥一点变化都没有呢？ 我们带着疑问研究一下源码～ 为了更好的研究babel的源码，我们直接去github clone一份： git clone https://github.com/babel/babel.git 然后当我们执行： npx babel test1.js

在项目中，我们更多的，用的是离线编译。在用之前，我们需要先安装 node（装完 node，有个 npm 就够用了），为什么呢？因为它需要在我们的电脑上面去部署一个编译器的环境。 首先，我们需要打开命令行输入： npm init -y 这个命令和 babel 没关系，我们只是需要先创建一个 package.json 文件。 接下来，我们就需要安装几个 babel 的包了 那么这几个包是干嘛的呢？ @babel/core：babel 的核心库 。没有它，就没有babel。 @babel/cli：命令行接口 。就是说，cli 为我们提供了必要的命令，没有它就执行不了 babel。说白了，就是你虽然有 babel，但你没命令，执行不了。 @babel/preset-env：指导 babel 的编译 。 preset 就是预设，预先设置好的一些配置 。比方说我有很多需要去调整的参数，比如 function，我想保留成箭头函数 () => {}，不编译成原始的 function () {}，和我能不能用 Array.from，Array.isArray 等等这些问题的配置。 而 env 就是环境预设，它内部自带了一个浏览器的兼容表，它会根据你具体的配置来编译你的 babel 。比如，我只要 IE 浏览器的兼容，其他的浏览器不管。 preset-env 是遵循一个 5% 原则。就是一个东西

babel 的配置 使用形式 命令行：babel 的设置以命令行参数的形式 package.json：在 babel 字段添加设置 .babelrc 文件：推荐使用 常用 options 字段说明 env : 指定在不同环境下使用的配置。env 字段从 process.env.BABEL_ENV 获取，不存在的话从 process.env.NODE_ENV 获取，如果还是不存在，则取默认值 development plugins : 要加载和使用的插件列表，插件名前的 babel-plugin- 可省略，plugin 列表按从头到尾的顺序运行 presets : 要加载和使用的 preset 列表，preset 名前的 babel-preset- 可省略，presets 列表的 preset 按从尾到头的逆序运行 plugins 和 presets 同时设置 ：plugins 先运行，每个 preset 和 plugin 都可以再配置自己的 option 配置文件的查找 babel 会从当前转译的文件所在目录下查找配置文件，如果没有找到，就顺着文档目录树一层层往上查找，一直到 .babelrc 文件存在或者带 babel 字段的 package.json 文件存在为止。 来源： CSDN 作者： wenxiaowen677 链接： https://blog.csdn.net

目录 第一篇、开发环境搭建 第二篇、三种声明方式 2.1 var(全局声明) 2.2 let(局部声明) 2.3 const(常量声明) 第三篇、解构赋值 3.1 数组的解构赋值 3.2 对象的解构赋值 3.3 字符串的解构赋值 第四篇、对象扩展运算符和rest运算符 4.1 对象扩展运算符 4.2 rest运算符 第五篇、新增字符串 5.1 字符串模板 5.2 字符串查找 5.3 字符串的复制 第六篇、数字的操作 6.1 数字判断 第七篇、数组方法 7.1 Array.from() 7.2 Array.of() 7.3 find()实例方法 7.4 fill()实例方法 7.5 entries()实例方法 7.6 数组循环 7.6.1 for...of 第八篇、函数扩展和箭头函数 第八篇、函数和数组的查缺补漏 8.1 对象的函数解构 8.2 数组解构 8.3 in的用法 8.4 数组遍历 8.5 数组转为字符串 第九篇、ES6中的对象 9.1 对象的赋值 9.2 key值的构建 9.3 自定义对象 9.3.1 is() 9.3.2 assign() 第十篇、Symbol在对象中的作用 10.1 认识Symbol 10.2 Symbol在对象中的应用 第十一篇、Set和WeakSet数据结构 11.1 Set的增删查 11.2 Set的输出 11.3 WeakSet的声明 11.4