npm
- –save 表示保存到package.json文件中
- –save-dev 表示保存到package.json文件的devDependencies中
babel
- 在项目目录 输入 ./node_modules/.bin/babel src --out-dir lib
也就是通过babel使用我们设置的解析方式去把src目录下的所有文件解析到lib目录下
由于刚开始没有设置解析方式,所以解析后的代码和之前的完全一致
- babel的解析方式需要指定,指定需要用到插件 plugins(本质就是一个js程序,指示着babel如何对代码进行转换)
- 如果npm版本大于5.2,那么可以用
npx babel
代替./node_modules/.bin/babel
plugins
- 把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尝试
- 创建preset.js文件来尝试一下ES7+的求幂运算符和 函数尾部逗号
启动转换 npx babel src --out-dir lib --presets=@babel/preset-env
把babel配置写成文件,这样就不用每次输入长长的命令
- 在根目录下创建babel.config.js配置文件
- 需要注意的是
只会为目标浏览器中没有的功能加载转换插件
[
"@babel/env",
{
targets: {
edge: "17",
chrome: "64",
firefox: "60",
safari: "11.1"
}
}
]
- 在package.json中加入script命令
- 然后执行npm run build就可以了
但是我们发现preset.js文件并没有被转换为es5,
因为文件中的求幂运算符和函数尾部逗号都在目标浏览器中支持edge: "17",chrome: "64",firefox: "60",safari: "11.1"
然后把edge:17改为10就可以看到变化了,因为edge10版本的浏览器不支持求幂运算符等语法
Polyfill是对执行环境或者其他功能的补充
也就是babel虽然能转换语法,但是es7中的includes所需要的环境没有!!,即使转换为ES5语法也获取不到ES7中的效果
所以也就需要Polyfill来引入所需要的环境来实现ES7的includes
给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");