babel

最新更新时间：2019年2月1日14:18:12

《猛戳-查看我的博客地图-总有你意想不到的惊喜》

本文内容：babel相关知识

概述

Babel is a JavaScript compiler.

官方文档

• 英文

• 中文

版本和包

babel 6	babel 7
-	@babel/core Core Library
-	@babel/cli CLI tool ,use babel from the terminal
babel-preset-react Babel preset for all React plugins.	@babel/preset-env Without any configuration, this preset will include all plugins to support modern JavaScript
-	@babel/polyfill别名@babel/runtime-corejs2，旧浏览器内核不支持高级API(如Promise、import())时，polyfill向顶层对象添加Promise执行的环境
-	@babel/preset-reactBabel preset for all React plugins.比如react-dom-router
babel-plugin-transform-class-properties	@babel/plugin-proposal-class-properties解析类的属性
babel-plugin-syntax-dynamic-import	@babel/plugin-syntax-dynamic-import
-	@babel/plugin-transform-arrow-functions To transform ES2015+ syntax into ES5
-	@babel/plugin-transform-runtime
-	@babel/plugin-transform-object-assign编译 Object.assign
-	@babel/plugin-proposal-decorators装饰器

preset && plugin

• preset：设定转码规则，babel-preset-es2015ES2015转码规则，babel-preset-reactreact转码规则

ES7不同阶段语法提案的转码规则（共有4个阶段），选装一个
babel-preset-stage-0
babel-preset-stage-1
babel-preset-stage-2
babel-preset-stage-3

• plugin：插件是小型JavaScript程序，它指示Babel如何对代码进行转换

在项目中使用

• 在项目中引入babel有四种方法：选择自己喜欢的一种即可，其中两种方法.babelrc和babel.config.js文件需要放在项目根目录，即和/node_modules/在同一目录
• 优先级

第一种：使用.babelrc

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": ["@babel/plugin-syntax-dynamic-import"]
}

第二种：在package.json内部设置babel

{
"dependencies": {
	"jquery": "^3.3.1",
	"react": "^16.6.3",
	"react-dom": "^16.6.3",
	"react-router-dom": "^4.3.1",
},
"devDependencies": {
	"@babel/core": "^7.1.2",
	"@babel/plugin-syntax-dynamic-import": "^7.2.0",
	"@babel/preset-env": "^7.1.0",
	"@babel/preset-react": "^7.0.0",
	"babel-loader": "^8.0.4",
},
"babel":{
    "presets": ["@babel/preset-env", "@babel/preset-react"],
    "plugins": ["@babel/plugin-syntax-dynamic-import"]
  }
}

第三种：在webpack中配置babel

module.exports = {
	module:{
		rules:[
			{
				test: /\.js$/,
				exclude: /(node_modules|bower_components)/,
				use: {
					loader: 'babel-loader',
					options: {
						presets: ["@babel/preset-env", "@babel/preset-react"],
						//babelrc: false,// 不采用.babelrc的配置
					}
				}
			}
		]
	}
}

第四种：配置babel.config.js

module.exports = {
	"presets": ["@babel/preset-env", "@babel/preset-react"],
	"plugins": ["@babel/plugin-syntax-dynamic-import"]
};

参考资料

• 无

感谢阅读，欢迎评论^-^

打赏我吧^-^