前端工程化之前
前端工程化之前,我们编写代码 html js css . 因为浏览器只能读懂这几个代码因为单独的html js css 代码的版本管理维护成本过高. 程序员间的工作交接太慢了
情景一:
现有一个发布发布上线的项目,编写代码为10万行. 接下来续修更新你作为这个项目的负责人 怎么办呢??
情景二:
公司有一个内测项目,目录结构简单只有一个html 文件中代码数量为 10万行接下来有一个需要, 让你变更某一个样式,作为程序原的你感受如何呢?
情景三:
现有一个发布发布上线的项目,编写代码为10万行.html css js 文件才分比较合理,但是变量名字重复太多.还有 a b c d 你接手这个项目,告诉我你的内容什么感觉?
现在的代码:
1: 编写代码按照规范走 规范地址: https://github.com/lin-123/javascript2: 创建文件 一个 html .js .scss .less .stylus .ts .vue .ejs ...3: 文件种类多了以后, 优势: 可以模块化开发,每个文件中的代码长得都可好看了,文件数目变多了,文件之间的命名管理统一了4: 众多文件中,有一个入口文件 main.js 那么 html 加载的 是 main.js , 通过这种方式让其他文件都运行5: 所有的文件 直接 或者 间接的 方式在 main.js 中运行,从而 在页面中运行6: bug 页面报错了,不能识别你编写的代码如何让浏览器可以读懂编写的代码?浏览器能读懂的代码有那些?html es5以下js css
如果有一个工具,把我编写的代码. 翻译为浏览器可以读懂的代码.然后运行翻译后的代码
工具是什么? 工具怎么翻译呀???
Babel
为什么有Babel
因为高版本js es6以上版本代码浏览器不识别. 需要将代码变为 es6以下的代码
1.认识 Babel
官网：在线编译：中文网：
Babel 是 JavaScript 的编译器，用来将 ES6 的代码，转换成 ES6 之前的代码
解释编译结果
Babel 本身可以编译 ES6 的大部分语法，比如 let、const、箭头函数、类
但是ES6 新增的 API，比如 Set、Map、Promise 等全局对象，以及一些定义在全局对象上的方法（比如 Object.assign/Array.from）都不能直接编译，需要借助其它的模块
使用
使用babel 准备工作
1.什么是 Node.js 和 npm
Node.js 是个平台或者工具，对应浏览器
后端的 JavaScript = ECMAScript + IO + File + ...等服务器端的操作
npm：node 包管理工具
npm install
2.安装 Node.js
node -v
npm -v
3.初始化项目
npm init -> package.json
4.安装 Babel 需要的包
npm install --save-dev @babel/core @babel/cli
npm install --save-dev @babel/[email protected] @babel/[email protected]
npm install
5: 运行 npx babel --version
介绍 @babel-cli 在当前文件下 安装 babel 命令局部的命令工具: npx 命令 xxx,全局省略npx
为社么可以运行命令
因为在系统环境变量，或者用户环境变量 PATH 中配置 命令工具的文件路径+
使用 babel 编译es6代码
1.执行编译的命令
在 package.json 文件中添加执行 babel 的命令
babel src -d dist
babel src --out-dir dist
src 是被编译的文件名
dist 编译后输出的文件名
-d 参数 作用配置输出文件名
--out-dir 是 -d全称
运行：
npm run build
2.Babel 的配置文件
.babelrc
npm install @babel/[email protected] --save-dev
创建配置文件 .babelrc，并配置
{
"presets": ["@babel/preset-env"]
}
// 在这个文件中编写 使用插件
// @babel/preset-env 作用，完成语法的编译转化
3：将编译后的代码，加载到html中测试
总结：将来遇到是 js 语法编译问题；就找 babel用babel中哪一个工具解决什么问题
babel 工具作用详解
babel本身不具有任何转换功能， 如果没有plugin,那么经过babel的代码和输入的是相同的
babel插件分为两种：
语法插件：在解析的过程中，能使babel能够解析更多的语法
转译插件: 在转换的过程中将代码输出。比如将箭头函数转译成正常的函数
其中preset就是babel常用的转译插件
@babel/cli
终端cli工具。
@babel/preset-env
preset是一套规范， 里面包含了几十个转译插件。这是一组插件的集合
preset可以分为下面几种：
1.按官方内容: env, react, flow, minify;
2.stage-x：stage-0 至 stage-3代表了es标准支持的不同阶段。0阶段是最初级的阶段，可以理解为仅仅才开始讨论标准， 换句话说就是基本没有什么浏览器支持es新标准。3表示成熟阶段，意味着主流浏览器的新版本都支持大部分新标准，基础的es新标准特性不需要降级编译为es5，浏览器即可原生支持。
presents详细链接地址：https://www.cnblogs.com/moqiutao/p/12980258.html
@babel/core
babel编译器。被拆分三个模块：@babel/parser、@babel/traverse、@babel/generator。
@babel/parser: 接受源码，进行词法分析、语法分析，生成AST。
@babel/traverse：接受一个AST，并对其遍历，根据preset、plugin进行逻辑处理，进行替换、删除、添加节点。
@babel/traverse：接受一个AST，并对其遍历，根据preset、plugin进行逻辑处理，进行替换、删除、添加节点。
@babel/traverse：接受一个AST，并对其遍历，根据preset、plugin进行逻辑处理，进行替换、删除、添加节点。
体验AST
@babel/plugin-*
babel插件机制、方便扩展、集成。
其他工具
babel-loader：使用Babel转换JavaScript依赖关系的Webpack加载器, 简单来讲就是webpack和babel中间层，允许webpack在遇到js文件时用bable来解析
@babel相当于一种官方标记，和以前大家随便起名形成区别
@babel/preset-env：即babel-preset-env，根据您要支持的浏览器，决定使用哪些transformations / plugins 和 polyfills，例如为旧浏览器提供现代浏览器的新特性。
@babel/preset-react：即 babel-preset-react，针对所有React插件的Babel预设，例如将JSX转换为函数.
babel-polyfill Babel默认只转换新的JavaScript语法，而不转换新的API。例如，Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象，以及一些定义在全局对象上的方法（比如Object.assign）都不会转译。如果想使用这些新的对象和方法，必须使用 babel-polyfill，为当前环境提供一个垫片。
babel-runtime 为了解决：Babel转译后的代码要实现源代码同样的功能需要借助一些帮助函数，而这些帮助函数可能会重复出现在一些模块里，导致编译后的代码体积变大。
所以提供了：单独的包babel-runtime供编译模块复用工具函数。
在没有使用babel-runtime之前，库和工具包一般不会直接引入 polyfill。否则像Promise这样的全局对象会污染全局命名空间，这就要求库的使用者自己提供 polyfill。这些 polyfill一般在库和工具的使用说明中会提到，比如很多库都会有要求提供 es5的polyfill。
在使用babel-runtime后，库和工具只要在 package.json中增加依赖babel-runtime，交给babel-runtime去引入 polyfill 就行了
babel 一些插以及用法
使用前请去官网查看
babel-plugin-dynamic-import-node //支持import('comXXX').then()写法
babel-plugin-dynamic-import-webpack //支持import('comXXX').then()写法
babel-plugin-import //支持对antd, antd-mobile, lodash, material-ui等库进行按需加载
babel-plugin-syntax-dynamic-import //支持import('comXXX').then()写法
babel-plugin-transform-class-properties //支持类内直接写属性和静态属性
babel-plugin-transform-decorators-legacy //支持装饰器
babel-plugin-transform-runtime //转换为ES5需要辅助函数，将所有的辅助函数集中到一个模块中，避免所有js文件中有重复的辅助函数生命
babel presets 和 plugins的区别
Babel插件一般尽可能拆成小的力度，开发者可以按需引进。比如对ES6转ES5的功能，Babel官方拆成了20+个插件。
这样的好处显而易见，既提高了性能，也提高了扩展性。比如开发者想要体验ES6的箭头函数特性，那他只需要引入transform-es2015-arrow-functions插件就可以，而不是加载ES6全家桶。
但很多时候，逐个插件引入的效率比较低下。比如在项目开发中，开发者想要将所有ES6的代码转成ES5，插件逐个引入的方式令人抓狂，不单费力，而且容易出错。
这个时候，可以采用Babel Preset。
可以简单的把Babel Preset视为Babel Plugin的集合。比如babel-preset-es2015就包含了所有跟ES6转换有关的插件。
配置babel生成代码
babel-polyfill
babel-runtime
bug: 例如 Array.from 并非在每个JavaScript环境中都存在，因此在编译之后它仍然无法使用：解决：babel-polyfill
1: 安装
npm install --save babel-polyfill
2：然后只需将 polyfill 包含在任何需要它的文件的顶部：
import "babel-polyfill";
bug:解决重复生成的代码过长问题，以及使用 “helper” 方法来保持生成的代码干净由于这些 “helper” 方法会变得很长，而且它们被添加到每个文件的顶部，因此您可以将它们移动到 require 的单个“运行时”中。
1 安装
npm install --save-dev babel-plugin-transform-runtime
npm install --save babel-runtime
2 使用 .babelrc
{
"plugins": [
"transform-runtime",
"transform-es2015-classes"
]
}
3 运行 babel
测试代码 请使用 class 类
配置babe（进阶）
手动指定插件
Babel 预设只是预配置插件的集合，如果您想做不同的事情，可以手动指定插件。这几乎与预设完全相同。
1:首先安装一个插件
npm install --save-dev @babel/plugin-transform-runtime
2:配置babel
{
"plugins": [
"@babel/plugin-transform-runtime", ]
}
作用：就是更加精准的运行哪一个 transforms
插件选项
每个插件都不不同的配置参数 options,根据自己的项目配置，更高性能的代码
{
"plugins": [
[
"@babel/plugin-transform-runtime",
{
"absoluteRuntime": false,
"corejs": false,
"helpers": true,
"regenerator": true,
"version": "7.0.0-beta.0"
}
]
]
}
基于环境定制 Babel####
{
"presets": ["@babel/presents-env"],
"plugins": [],
"env": {
"development": {// 开发环境
"plugins": [...]
},
"production": {// 生产环境
"plugins": [...]
}
}
}
构建自己的 Preset
手动指定插件？插件选项？基于环境的设置？对于所有项目，所有这些配置似乎都需要重复很多次
因此，我们鼓励社区创建自己的预设。这也可是你们公司的预设
{
"presets": ["@babel/presents-env"],
"plugins": [
"@babel/plugin-transform-runtime",
],
}
babel 与其他工具
eslint
webpack
vue
react