当前位置：首页 > article >正文

【Webpack--00802】配置Babel语法兼容

article 2024/9/22 10:43:52

🤓😍Sam9029的CSDN博客主页:Sam9029的博客_CSDN博客-前端领域博主
🐱‍🐉若此文你认为写的不错，不要吝啬你的赞扬，求收藏，求评论，求一个大大的赞！👍*
🐞🐞文章若有错误或某个内容有更优的解决方案，还望指正！👍*
更多webpack入门知识，详细解读webpack的基本使用、进阶优化等；请阅读专栏：sam9029–CSDN博客—Webpack入门笔记
或者访问作者个人博客网站：sam9029.asia—Webpack入门笔记

Babel

官方文档 https://www.webpackjs.com/loaders/babel-loader#root

JavaScript 编译器。

主要用于将 ES6 语法编写的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中

安装

npm i babel-loader @babel/core @babel/preset-env -D

babel-loader：用于在 webpack 构建过程中将 JavaScript 文件从 ES6+转换为 ES5，以便在旧版浏览器中运行。
@babel/core：这是 Babel 编译器的核心包，提供转译 JavaScript 代码的功能。
@babel/preset-env：这是 Babel 的一个预设，用于将 ES6+代码转换为向后兼容的 JavaScript 版本，以便在当前和旧版浏览器中运行。

配置文件

配置文件由很多种写法：

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

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

`babel.config.js`基础配置

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

webpack.config.js 配置 Babel

配置在 loader 之中

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/, // 排除node_modules代码不编译
        loader: "babel-loader",
      },
    ],
  },
};

完整 webpack.config.js

const path = require("path");
const ESLintWebpackPlugin = require("eslint-webpack-plugin");

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中
    clean: true, // 自动将上次打包目录资源清空
  },
  module: {
    rules: [
      // ... 其他配置
      {
        test: /\.js$/,
        exclude: /node_modules/, // 排除node_modules代码不编译
        loader: "babel-loader",
      },
    ],
  },
  plugins: [
    // ... 其他配置
  ],
  mode: "development",
};