babel笔记

babel笔记

• 说明
• 文档
• 配置文件
• 具体配置
• 使用

说明

Babel是用于将低版本浏览器不支持的语法如ES6，前端框架特有的语法如Vue、React、TypeScript，转换为浏览器能正常执行的JS代码

文档

官方文档：https://babeljs.io/docs/

配置文件

配置文件由很多种写法：

• babel.config.*：新建文件，位于项目根目录
  • babel.config.js
  • babel.config.json
• .babelrc.*：新建文件，位于项目根目录
  • .babelrc
  • .babelrc.js
  • .babelrc.json
• package.json 中 babel：不需要创建文件，在原有文件基础上写

Babel 会查找和自动读取它们，所以以上配置文件只需要存在一个即可

具体配置

我们以 babel.config.js 配置文件为例：

module.exports = {
  // 预设
  presets: [],
};

1. presets 预设

简单理解：就是一组 Babel 插件, 扩展 Babel 功能

• @babel/preset-env: 一个智能预设，允许您使用最新的 JavaScript。
• @babel/preset-react：一个用来编译 React jsx 语法的预设
• @babel/preset-typescript：一个用来编译 TypeScript 语法的预设

使用

1. 下载包
   npm i -D babel-loader@8 @babel/preset-env@7 @babel/core@7
2. 定义 Babel 配置文件babel.config.js

module.exports = {
  presets: ["@babel/preset-env"],
};

3. 配置webpack.config.js

      {
        test: /\.js$/,
        exclude: /node_modules/, // 排除node_modules代码不编译
        loader: "babel-loader",
      },

4. 运行打包指令
   npx webpack