Babel 6.x 到 Babel 7.x遇到的那些事

正文

今天学习React配置babel模块的时候，由于教程是去年的，使用的是 Babel 6.X，而如今 Babel 已经更新到了 Babel 7.X，所以遇到了不少小问题，翻了翻官方文档，现在总结下遇到的一些问题

安装包遇到的问题

//只写了与 babel 有关的 
"devDependencies" : {
	"@babel/core" : "^7.6.0",
	"@babel/plugin-transform-runtime" : "^7.6.0",
	"@babel/preset-env" : "7.3.1",
	"@babel/preset-react" : "^7.0.0",
	"babel-loader" : "^8.0.6"
},
"dependencies" : {
	"@babel/runtime" : "^7.6.0"
}

在 webpack.config.js 文件中配置

//无关代码没有写
module.exports = {
	// 无关代码
	//无关代码......
	module: {//所有第三方模块的配置  规则  
		rules : [//第三方匹配规则
			test : /\.js|jsx$/,		//默认 .js 文件。但是也写了 jsx 文件
			use : ['babel-loader'],
			exclude : /node_modules/		//不要忘记添加 exclude 排除项
		]
	}
}

写 .bablerc 配置文件

//此文件名称为 .babelrc ，其目录放在与 src 文件平级的根目录
{
	"presets" : [ 
		"@babel/preset-env" ,
		"@babel/preset-react"
		],
		"plugins" : [
			"bable/plugin-transform-runtime"
	]
}

总结

babel 舍弃了以前的 babel--的命名方式，改成了 @babel/-
stage-x 已经被启用，babel 7.X版本已经不建议使用，所以在开发过程中需要把 babel-preset-stage-x卸载，然后再修改 .babelrc文件

---

—所有笔记仅做个人整理，并非全部原创，内容源自网络—