babel

Q1: babel.config.js 和.babelrc的区别

// babel 7.x 以上支持两种
- babelrc 只会影响本项目中的代码,相对文件的配置文件。
- babel.config.js会影响整个项目中的代码，包含node_modules中的代码,当前项目维度的配置文件，相当于一份全局的配置文件。如果项目决定使用这个配置文件，就一定会应用到所有的文件转换中。

babel : JS 的编译器。将ES6->ES5

缺点： 不能够翻译es6新的API.

//ES6 
new Promise((resolve, reject) => {
  resolve('成功');
}).then(value => {
  console.log(value);
});
Array.from([1, 2]);
class Person {
  constructor(name, age) {
    Object.assign(this, { name, age });
  }
}
new Person('Alex', 18);
const [x,y,z] = [1,2,3]
import './index.js';



// ES6
"use strict";
require("./index.js");
function _classCallCheck(instance, Constructor) {
  if (!(instance instanceof Constructor)) {
    throw new TypeError("Cannot call a class as a function");
  }
}
new Promise(function (resolve, reject) {
  resolve("成功");
}).then(function (value) {
  console.log(value);
});
Array.from([1, 2]);
var Person = function Person(name, age) {
  _classCallCheck(this, Person);
  Object.assign(this, {
    name: name,
    age: age
  });
};
new Person("Alex", 18);
var x = 1,
  y = 2,
  z = 3;

### babel

npm install --save-dev @babel/core@7.11.0 @babel/cli@7.10.5  // 安装babel 核心文件
npm i --save-dev @babel/preset-env@7.11.0  // 安装编译所需文件

npx babel --version // 查找局部下的babel安装信息 
npx 指令
去node_modules/.bin路径检查npx后的命令是否存在，找到之后执行；
找不到，就去环境变量$PATH里面，检查npx后的命令是否存在，找到之后执行;
还是找不到，自动下载一个临时的依赖包最新版本在一个临时目录，然后再运行命令，运行完之后删除，不污染全局环境。
局部查找

npx babel test -d dist //ES6转ES5
npx是npm5.2之后发布的一个命令，也就是只要npm的版本>=5.2就可以使用此命令

### polyfill

// 怎么向后兼容JS语法
// 重启浏览器就可以解决ie不兼容vue的问题。
// 安装插件代码：
npm install babel-polyfill --save-g 
// 安装后，在vue项目的main.js中这里添加：
import 'babel-polyfill'  

### webpack

// 安装的过程
1. 安装 nodejs
2. 安装 webpack webpack-cli (全局安装/局部安装)
   查看 npx webpack --version(查看局部下面)
3. 创建配置文件 webpack.config.js
  学习配置文件
          
// 注意：在安weebpack时候，要确保name：不能为webpack
// 详情见 webpack
  
// webpack.config.js
module.exports = {
+ mode: 'development',		// mode的默认配置就是production，就是说如果你不配置mode默认值是生产模式development
- devtool: 'eval',			// 控制如何生成source-map，默认配置是不生成source-map，eval值是在bundle文件中每个模块都使用 eval() 执行
- cache: true,				// 缓存生成的 webpack 模块和 chunk，默认只有在watch模式下启用
- performance: {
-   hints: false			// 配置如何展示性能提示。例如，如果一个资源超过 250kb，webpack 会对此输出一个警告来通知你。值有：false | "error" | "warning"，此属性默认设置为 "warning"。
- },
- output: {
-   pathinfo: true			// 告知 webpack 在 bundle 中引入「所包含模块信息」的相关注释。此选项在 development 模式时的默认值是 true，而在 production 模式时的默认值是 false。
- },
- optimization: {			// 
-   namedModules: true,		// 告知 webpack 使用可读取模块标识符(readable module identifiers)，来帮助更好地调试。webpack 配置中如果没有设置此选项，默认会在 mode development 启用，在 mode production 禁用。与下面new webpack.NamedModulesPluginn()插件效果相同。
-   namedChunks: true,		// ？？？告知 webpack 使用可读取 chunk 标识符(readable chunk identifiers)，来帮助更好地调试。webpack 配置中如果没有设置此选项，默认会在 mode development 启用，在 mode production 禁用。
-   nodeEnv: 'development',	// nodeEnv使用DefaultPlugin将字符串设置给process.env.NODE_ENV，除非设置为false，默认值是mode的值
-   splitChunks: {
-     hidePathInfo: false,	// ？？？
-     minSize: 10000,		// 生成chunk的最小大小（以字节为单位），默认为30000
-     maxAsyncRequests: Infinity,	// 按需加载时并行请求的最大数量，默认为5
-     maxInitialRequests: Infinity,	// 入口的最大并行请求数。默认为3
-   },
- },
- plugins: [
-   new webpack.NamedModulesPlugin(),	// 过时，webpack4中建议使用optimization.namedModules来实现相同的效果
-   new webpack.NamedChunksPlugin(),	// 过时，webpack4中建议使用optimization.namedChunks来实现相同的效果
-   new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("development") }),	// 与上面的nodeEnv参数效果一样
- ]
}