bable.js是什么

browers=bable

为了把高版本的ES6编译成低版本的，以供浏览器读取顺利
有两个方法

引入本地bable。（不建议）容易出事儿，比如延迟，或者某些奇奇怪怪的问题

在线编译bable。（建议）

引入本地：（不建议）

// 1.引入babel包
<script src="browser.min.js" charset="utf-8"></script>
// 2.修改类型
<script type="text/babel">
</script>

在线编译：（建议）

在线编译js文件，然后去做事

1.安装Node.js、初始化项目

 npm init -y

npm init -y: 跟bable没关系，纯粹是为了创建一个自己的package.json文件（node的工程文件，包文件）

2.安装bable-cli（安装必须的包）

// i 就是 installnpm i @babel/core @babel/cli @babel/perset-evn -D      npm i @babel/polyfill -S

@是bable7.0的写法

@babel/core: babel核心库，没有他就没有babel

@babel/cli: command interface，命令行接口，为我们提供了必要的命令，没有他就执行不了babel

@babel/perset-evn:
pre-预先，set-设置，预设。

指导babel的编译。

预先设置好的配置，比如说能不能用箭头函数，能不能用isArray之类的。

perset-evn是环境预设，内部自带了浏览器的兼容表，是另一个独立的库，会根据具体配置编译babel，可能一个浏览器一套配置。

遵循5%原则，只要这个东西在浏览器中占有量不超过5%，那就忽略他，用户比较少的特性就不去管他

-evn: 环境

5.npm i @babel/polyfill -S：
polyfill 不是一个库，是一个行为的名字，

翻译成汉语有填充的意思，

编译的过程中检查一下目标平台是什么，如果是特别低版本的情况，会把自己带的库函数给你，然后就顺便把他编译进去，这样可以补充一些浏览器不带的操作，

属于对第一句话的优化，可有可无。

3.添加执行脚本（package.json）

"scripts":{ "build":"babel src -d dest"
}

scripts 脚本。可以在这里面加一条自己的命令，
相当于以后不用敲那一长串了，
可以用build代替后面的babel src -d dest .

"build":“babel src -d dest” : src从哪个目录里面读取源文件 -d（目标destination） dest往哪边输

4.添加.babelrc配置文件(一个json)

{"presets":[       // 主要就是这个"@babel/preset-env" // 预设听这个文件的]
}

5.执行编译

 npm run build

bable.js是什么相关推荐

Vue.js 开发工具-Vue-CLI
1.0 Vue-CLI 是什么 vue-cli是 Vue.js 开发的标准工具,帮我们集成了很多的可选工具,我们只需要在创建工程的时候根据需要进行选择,vue-cli官网的介绍是这样的 2.0 Vue ...
element-ui按需引入
1.安装 cnpm i element-ui -S //-S表示 --save 2.借助 babel-plugin-component,我们可以只引入需要的组件,以达到减小项目体积的目的. npm i ...
React-虚拟DOM
1. react 2. react高效的原因: 3. react核心库: 4. 两种创建虚拟DOM方式 5. 虚拟DOM 6. React JSX简化创建虚拟DOM react官方文档:React 官 ...
第93天学习打卡（Vue 初识Vue）
Vue:前端体系,前后端分离 1.概述 MVVM(Model- View-ViewModel)是一种软件架构设计模式,是一种简化用户界面的事件驱动编程模式. MVVM源自经典的MVC(Model(在后 ...
bable.config.js配置element
按需引入时,官方文档要求配置写成 { "presets": [["es2015", { "modules": false }]], &quo ...
bable转换html里面的js,如何使用babel，把写好的es6代码，转化为es5，让ie8兼容。...
现在有很过编译的工具,比如是babel编译,webpack,grunt,gulp. 这篇文字很简单,就是让我们使用es6语法的代码,不仅仅可以让谷歌浏览器看,还可以使用ie8以上的浏览器看,其实就是把 ...
bable转换html里面的js,Babel 转译
Babel 转译由于框架依赖的 Node 最低版本为 6.0.0,但这个版本还不支持 async/await,所以在项目里使用 async/await 时,需要借助 Babel 转译. Babel ...
使用webpack2.0 搭建react.js项目
最近一段时间没有写react.js,发现webpack已经完全升级为2.0了,升级后导致以前的项目不能正常编译,只能重新实践一番关于webpack2.0和1.x的区别概括起来就是tree shaki ...
Bable实现由ES6转译为ES5
Babel是一个广泛使用的转码器,可以将ES6代码转译为ES5代码,从而在现有环境下执行. 举例说明: 转译前(ES6格式)代码如下: let User = { name : '张三', age : ...
React.js 2016 最佳实践徬梓阅读 1584收藏 71
为什么80%的码农都做不了架构师?>>> 译者按:近几个月React相关话题依旧火热,相信越来越多的开发者在尝试这样一项技术,我们团队也在PC和移动端不断总结经验.2016来了 ...

bable.js是什么

引入本地：（不建议）

在线编译：（建议）

bable.js是什么相关推荐

最新文章

热门文章