笔记 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

为社么可以运行命令

因为在系统环境变量,或

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值