bable.js是什么

browers=bable

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

1. 引入本地bable。（不建议）容易出事儿，比如延迟，或者某些奇奇怪怪的问题
2. 在线编译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 就是 install
	npm i @babel/core @babel/cli @babel/perset-evn -D 		
	npm i @babel/polyfill -S

1. @是bable7.0的写法
2. @babel/core: babel核心库，没有他就没有babel
3. @babel/cli: command interface，命令行接口，为我们提供了必要的命令，没有他就执行不了babel
4. @babel/perset-evn:
   • pre-预先，set-设置，预设。
   • 指导babel的编译。
   • 预先设置好的配置，比如说能不能用箭头函数，能不能用isArray之类的。
   • perset-evn是环境预设，内部自带了浏览器的兼容表，是另一个独立的库，会根据具体配置编译babel，可能一个浏览器一套配置。
   • 遵循5%原则，只要这个东西在浏览器中占有量不超过5%，那就忽略他，用户比较少的特性就不去管他
5. -evn: 环境
6. 5.npm i @babel/polyfill -S：
   • polyfill 不是一个库，是一个行为的名字，
   • 翻译成汉语有填充的意思，
   • 编译的过程中检查一下目标平台是什么，如果是特别低版本的情况，会把自己带的库函数给你，然后就顺便把他编译进去，这样可以补充一些浏览器不带的操作，
   • 属于对第一句话的优化，可有可无。

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

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

1. scripts 脚本。可以在这里面加一条自己的命令，
   相当于以后不用敲那一长串了，
   可以用build代替后面的babel src -d dest .
2. "build":“babel src -d dest” : src从哪个目录里面读取源文件 -d（目标destination） dest往哪边输

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

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

5.执行编译

	npm run build

标签：npm,浏览器,dest,babel,什么,js,编译,bable
来源： https://blog.csdn.net/ZZhXuan/article/details/113660156