Babel转换相关问题

Babel:

1.单独babel转化
推荐网址：https://github.com/jamiebuilds/the-super-tiny-compiler
将ES6以上的代码转成向后兼容版本的javascript；包括语法转化、源代码转换
	babel编译器工作流程为解析、转换、生成。
		具体：原生源代码--》词法分析--》tokens数组--》语法分析--》AST抽象语法树--》遍历--》访问--》应用插件--》新的AST--》目标源代码
	npm install @babel/core @babel/cli -D
		在项目下创建一个demo.js文件，写js的一些代码
	//将项目下的demo.js文件转成到dist文件下demo.js
	//dir表示目录
	npx babel demo.js --out-dir dist
	
	//将项目下的demo.js文件转成到该项目下的test.js
	//file表示目录
	npx babel demo.js --out-file test.js

//需要具体转换哪些东西还得额外下载插件
	箭头函数：
		npm install @babel/plugin-transform-arrow-functions -D
		//将项目下的demo.js文件转成到该项目下的test.js
		//file表示目录
		npx babel demo.js --out-file test.js --plugins=@babel/plugin-transform-arrow-functions
	
	块级作用域：
		npm install @babel/plugin-transform-block-scoping -D
		//将项目下的demo.js文件转成到该项目下的test.js
		//file表示目录
		npx babel demo.js --out-file test.js --plugins=@babel/plugin-transform-arrow-functions,@babel/plugin-transform-block-scoping

//预设：(将经常用到的一些插件整合，不需要一个个的下载)
	npm install @babel/preset-env -D
	//将项目下的demo.js文件转成到该项目下的test.js
		//file表示目录
		npx babel demo.js --out-file test.js --presets=@babel/preset-env

2.webpack中babel转化
	npm install babel-loader @babel/core @babel/cli @babel/plugin-transform-arrow-functions npm install @babel/plugin-transform-block-scoping @babel/preset-env -D
	下载后在webpack.config.js的module.exports中module的rules中：
	(1)不成功，没有转化，因为没有用到插件
	 module:{
    			rules:[{
            			test:/\.js$/,
            			loader:"babel-loader"	
        			} ]
	}
	终端：npm run build
	（2）用哪个插件就都按上
	module:{
    			rules:[{
            			test:/\.js$/,
			use:{
			loader:"babel-loader",
            			options:{
				plugin:[
					"@babel/plugin-transform-arrow-functions",
					"@babel/plugin-transform-block-scoping",
				]
			}
			}	
        			} ]
	}
	终端：npm run build
	（3）预设插件
	module:{
    			rules:[{
            			test:/\.js$/,
			use:{
			loader:"babel-loader",
            			options:{
				presets:[
					"@babel/preset-env",
				]
			}
			}	
        			} ]
	}
	终端：npm run build

3.babel配置文件
	rc---运行时编译
	在项目下创建一个babel.config.js文件
		内容为：
			module.exports = {
				presets:[
					"@babel/preset-env"
				]
			}
	在webpack.config.js的module.exports中module的rules中：
	 module:{
    			rules:[{
            			test:/\.js$/,
            			loader:"babel-loader"	
        			} ]
	}