前端工程——babel探索

npm

1. –save 表示保存到package.json文件中
2. –save-dev 表示保存到package.json文件的devDependencies中

babel

1. 在项目目录 输入 ./node_modules/.bin/babel src --out-dir lib

• 也就是通过babel使用我们设置的解析方式去把src目录下的所有文件解析到lib目录下
• 由于刚开始没有设置解析方式，所以解析后的代码和之前的完全一致

2. babel的解析方式需要指定，指定需要用到插件 plugins(本质就是一个js程序，指示着babel如何对代码进行转换)

• 如果npm版本大于5.2,那么可以用npx babel代替./node_modules/.bin/babel

plugins

1. 把ES6+转为ES5,使用官方插件@babel/plugin-transform-arrow-functions
   npx babel src --out-dir lib --plugins=@babel/plugin-transform-arrow-functions

• 此时可以看到index.js中的箭头函数被转换为ES5中的普通函数表达式形式了
• 虽然此时可以转换ES6+的一些语法，但是例如求幂运算符** 还是不能转换，因为只使用了一个插件，不全面
• 解决方法：安装preset-env插件，该插件包含所有支持js的插件，也就是包含了js所有ES6+语法的转换

preset-env尝试

1. 创建preset.js文件来尝试一下ES7+的求幂运算符和 函数尾部逗号
2. 启动转换 npx babel src --out-dir lib --presets=@babel/preset-env

把babel配置写成文件，这样就不用每次输入长长的命令

1. 在根目录下创建babel.config.js配置文件

• 需要注意的是只会为目标浏览器中没有的功能加载转换插件

	[
		"@babel/env",
		    {
		      targets: {
		        edge: "17",
		        chrome: "64",
		        firefox: "60",
		        safari: "11.1"
		      }
		    }
	]

2. 在package.json中加入script命令
3. 然后执行npm run build就可以了

• 但是我们发现preset.js文件并没有被转换为es5,
• 因为文件中的求幂运算符和函数尾部逗号都在目标浏览器中支持edge: "17",chrome: "64",firefox: "60",safari: "11.1"

4. 然后把edge:17改为10就可以看到变化了，因为edge10版本的浏览器不支持求幂运算符等语法

Polyfill是对执行环境或者其他功能的补充

1. 也就是babel虽然能转换语法，但是es7中的includes所需要的环境没有！！，即使转换为ES5语法也获取不到ES7中的效果
2. 所以也就需要Polyfill来引入所需要的环境来实现ES7的includes
3. 给index.js添加var hasTwo = [1, 2, 3].includes(2);然后执行 npm run build

• 可以看到index.js对includes没有进行转换

使用babel/polyfill来模拟完成ES6+环境

• 可以使用像Promise或者WeakMap这样的新内置函数
• 可以使用像Array.from或者Object.assign这样的静态方法
• 可以使用像Array.prototype.includes这样的实例方法
• 还有generator函数
• 在babel.config.js中添加useBuiltIns: "usage"就可以只使用想要的polyfill
• 再次npm run build 对 index.js，观察

可以看到多出了引用，也就是引入了includes方法所需要的环境
require("core-js/modules/es7.array.includes");

require("core-js/modules/es6.string.includes");