babel基础配置
2024-10-07 16:45:09
babel是干什么的
es6语法已经出来很多年，但各家游览器对es6的支持各不相同。为了解决这个问题，babel应运而生。
babel支持把es6语法编译成es5，完全兼容各家游览器，避免兼容性问题出现。
配置babel的时候分两种情况
- 业务贷款开发
- 类库代码开发
why?
babel支持把es6编译成es5，使各家游览器支持。比如es6语法Map、Set。低版本游览器不兼容，需要babel支持。这个时候就用到了@babel/polyfill（垫片，@babel/polyfill使用的时候需要放到业务js代码的最前面），就是重新定义Map方法。
比如 代码
new Map()
babel编译后还是 如上，但是 bable 会在全局定义一个 Map 方法（因为全局定义可能会造成命名污染），如果你是在开发项目业务代码的时候，其实不太用考虑这个问题。但是如果你是在开发类库代码的时候，你的代码可能会被其他的人拿去用，这样就比较危险。
故两种情况配置方法有些许区别！
如下：
业务代码开发
命令行安装babel包
npm install --save-dev babel-loader @babel/core
npm install @babel/preset-env --save-dev
webpack.config.js 配置
module: {
rules: [
{
test: /\.js$/,
// exclude 排除掉不进行 babel-loader 编译
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
// 配置项 很多
options: {
presets: ['@babel/preset-env']
}
}
}
]
}
如果配置的babel的配置项很多，全部集中在webpack.config.js不便于代码的查看和管理
故 可以配置 .babelrc （在webpack.config.js同级目录中新建 .babelrc ）
// webpack.config.js中
module: {
rules: [
{
test: /\.js$/,
// exclude 排除掉不进行 babel-loader 编译
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader'
}
}
]
} //.babelrc中
{
"presets": ["@babel/preset-env", {
targets: {
chrome: "67"
},
// 这个配置项配置了 说明在入口文件中 会自动的给我们加上 import '@babel/polyfill' 的功能，故在业务代码中我们不需要手动的添加 import '@babel/polyfill'
useBuiltIns: "usage"
}]
}
组件/类库代码开发（比如开发npm包）
命令行安装依赖包
npm install --save-dev @babel/plugin-transform-runtime
npm install --save @babel/runtime
npm install --save @babel/runtime-corejs2
webpack.config.js
module: {
rules: [
{
test: /\.js$/,
// exclude 排除掉不进行 babel-loader 编译
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options:{
"plugins": [
[
// 不在全局中定义变量
"@babel/plugin-transform-runtime",
{
"absoluteRuntime": false,
"corejs": 2,
"helpers": true,
"regenerator": true,
"useESModules": false
}
]
]
}
}
}
]
}
最新文章
- SPSS数据分析—描述性统计分析
- 多个微信菜单都需要获取openId的时候如何处理回调页面的问题
- iOS - KVC 键值编码
- Physics2D.Linecast中的参数layerMask
- 使用GDI+ DrawDriverString实现行距及字符间距控制
- 如何解决JavaWeb乱码问题
- iOS发展 ---- 至iPhone 6自适应布局设计 Auto Layout
- 第一章 Java入门
- 发现一个微博图床API和图片上传代码
- 【AtCoder】ARC074
- Shiro笔记（三）shiroFilter拦截器配置原则
- 网络编程—端口分类调研和netstat命令
- Qt_qwt图形开发
- Linux查看某个命令属于哪个包
- mysqldump: Got error: 1356 mysqldump的重要参数--force
- ECMAScript5新特性之Object.isExtensible、Object.preventExtensions
- 【335】Install PyDev in Eclipse IDE
- Scrum培训小体会
- Ajv JSON数据格式校验 使用
- 谈谈mybatis逆向工程中的Example类