笔记 babel-readmi.md

目录

前端工程化之前

前端工程化之前,我们编写代码 html js css . 因为浏览器只能读懂这几个代码
因为单独的html js css 代码的版本管理维护成本过高. 程序员间的工作交接太慢了

情景一:

现有一个发布发布上线的项目,编写代码为10万行.
接下来续修更新
你作为这个项目的负责人 怎么办呢??

情景二:

公司有一个内测项目,目录结构简单只有一个html 文件中代码数量为 10万行
接下来有一个需要, 让你变更某一个样式,作为程序原的你感受如何呢?

情景三:

现有一个发布发布上线的项目,编写代码为10万行.
html css js 文件才分比较合理,但是变量名字重复太多.还有 a b c d
你接手这个项目,告诉我你的内容什么感觉?

现在的代码:

1: 编写代码按照规范走 规范地址: https://github.com/lin-123/javascript
2: 创建文件 一个 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/core@7.11.0 @babel/cli@7.10.5

    npm install
5: 运行 npx babel --version     

介绍 @babel-cli 在当前文件下 安装 babel 命令
局部的命令工具: npx 命令 xxx,全局省略npx

为社么可以运行命令

因为在系统环境变量，或