babel编译es6

babel编译es6

方法一：引入JS文件（在线）

babel===browser.js

问题
1，在线编译效率更低（特别是当脚本文件过大时）
2，本身browser.js就不兼容更低版本的浏览器（IE7及以下）

<script src="browser.min.js" charset="utf-8"></script>
// 注意此时es6编写的脚本的mine type属性要设置为"text/babel"，便于被browser.min.js文件识别并编译。
<script type="text/babel">
	let a=12;
	let b=6;
	let sum=(a,b)=>a+b;

	sum(a,b);
</script>

方法二：编译JS文件（离线）

1. 在cmd命令行工具中，先进入当前代码文件夹的路径，在该路径下初始化项目(创建一个自己的package.json文件——node的包文件)
   nmp init -y
   

2. 安装babel-cli
   在原文件夹路径下执行如下指令
   npm i @babel/core @babel/cli @babel/preset-env -D
   其中安装的@babel/core是babel的核心库，没有它就没有babel
   @babel/cli是command line interface，就是命令行接口，用于命令行转码，它为我们提供了必要的命令，没有它就执行不了babel，有了它就可以使用前面的@babel/core了
   @babel/preset-env就是预先设置好的配置，告诉babel在什么情况下需要将代码编译成低版浏览器可识别的代码。实际上它内部自带了浏览器的兼容表，根据浏览器具体的配置来编译babel。（忽略市场份额低于5%的浏览器兼容）

3. 在第一步创建的package.json文件中的“scripts”中添加一行命令
   “build”: “babel 原脚本文件目录 -d 编译后的脚本文件目录”

"build": "babel src -d dest"

然后添加.babelrc配置文件，在当前文件夹下新建一个文件，命名为“.babelrc”，内容为

{
    
    
  "presets": [
    "@babel/preset-env"
  ]
}

4. 通过编译上面添加的这条指令，就可以将src文件夹中的所有es6编写的脚本文件，编译成一个同名的文件输出在dest文件夹中。

npm run build

然后在所需的文件中引入dest文件夹下相应的脚本文件就可以在低版本浏览器中使用了。

5. 上述步骤结束后，最多只能兼容到IE7。如果想要兼容更低版本的浏览器，就可以在安装babel时，再安装一个@babel/polyfill，它会在编译的时候检测一下浏览器版本，如果是特别低版本的浏览器，它会把自带的库函数给予浏览器使用，以此补充浏览器不带的一些操作。

npm i @babel/polyfill

扩展： https://zhuanlan.zhihu.com/p/147083132