第六篇伴学笔记啦~ 青训营最后一天，感觉收获还是不小的，今天的内容是js和css新语法转译工具——babel和postcss
babel
1、Babel 主要由核心模块（@babel/core）、预设、插件、polyfill以及其他辅助模块组成，它们共同协作来完成 JavaScript 代码的编译和转换工作。
2、核心包：@babel/core用于编译
3、命令行工具：@babel/cli可以在命令行将一个文件内容转译
# 转码结果输出到标准输出
$ npx babel example.js
# 转码结果写入一个文件
# --out-file 或 -o 参数指定输出文件
$ npx babel example.js --out-file compiled.js
# 或者
$ npx babel example.js -o compiled.js
# 整个目录转码
# --out-dir 或 -d 参数指定输出目录
$ npx babel src --out-dir lib
# 或者
$ npx babel src -d lib
# -s 参数生成source map文件
$ npx babel src -d lib -s
4、polyfill
Babel 默认只转换新的 JavaScript 句法（syntax），而不转换新的 API，比如Iterator、Generator、Set、Map、Proxy、Reflect、Symbol、Promise等全局对象，以及一些定义在全局对象上的方法（比如Object.assign）都不会转码。
举例来说，ES6 在Array对象上新增了Array.from方法。Babel 就不会转码这个方法。如果想让这个方法运行，可以使用core-js和regenerator-runtime(后者提供generator函数以及等等异步函数的转码)，为当前环境提供一个垫片。
安装命令如下。
$ npm install --save-dev core-js regenerator-runtime
然后，在脚本头部，加入如下两行代码。
import 'core-js';
import 'regenerator-runtime/runtime';
// 或者
require('core-js');
require('regenerator-runtime/runtime');
- .babelrc中如何配置？
{
"presets": [
[
"@babel/preset-env",
{
"useBuiltIns": "usage",
//有三个值
//false-不自动引入任何polyfill
//usage-自动引入，在代码中有实际使用到的特性才会被引入，避免了引入不必要代码，减小最终打包大小
//entry-需要在项目入口手动引入polyfill
"corejs": 3//定义corejs的版本
}
]
]
}
postcss
postcss是一个运行在nodejs环境下可以将项目要支持的浏览器暂不支持的css新特性转成可以运行的css旧语法的集成工具（安装postcss和postcss-cli）
1、如何配置项目要支持的浏览器？——在package.json中的browserList中配置
2、postcss集成能使用哪些规则？
规则一：使用autoprefixer可以自动获取浏览器的流行度和能够支持的属性，并根据这些数据帮你自动为css规则添加前缀（安装autoprefixer）
规则二：使用postcss-preset-env将新语法转成旧语法，比如将css的嵌套语法转换（安装postcss-preset-env）
规则三：使用stylelint检查css语法（安装stylelint和stylelint-config-standard），后者是stylelint的一些基本的规则
规则三：使用postcss-pxtorem可以将css中px单位转成rem单位（安装postcss-pxtorem）
`命令行指令`
npx postcss 原本的css文件 -o 指定输出文件名
比如：npx postcss style.css -o dist.css
`postcss文件配置`
1、创建一个postcss.config.js
2、文件内容：
const postcssPresetEnv = require('postcss-preset-env')
module.export = {
plugins:[
require('stylelint'),
require('autoprefixer'),
postcssPresetEnv({
stage:0,//将stage为0的css语法新特性转译，比如是css嵌套新语法
}),
require('postcss-pxtorem')
]
}
`将stylelint配置规则`
1、创建一个.stylelintrc.json
2、文件内容：
{
"extends":"stylelint-config-standard"
}
规则四：css模块改名
