注册
登录

Webpack5 教程Babel 将生成向后兼容的 JavaScript 代码

编译工具 / 发布于 3个月前 / 更新于 3个月前 / 本文字数: 1.35k 字 /教程集数： 8

标签： webpack5 Babel / webpack5教程 / webpack5 兼容代码

Babel 是什么

Babel 是一个工具链，主要用于将采用 ECMAScript 2015+ 语法编写的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。
中文文档：https://www.babeljs.cn/docs/

配置文件

位于项目根目录，配置文件由很多种写法：

  • babel.config.js
  • babel.config.json
  • .babelrc
  • .babelrc.js
  • .babelrc.json
  • package.json 中 babel：不需要创建文件，在原有文件基础上写

具体配置 

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

presets 预设

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

在 Webpack 中使用

依赖包 

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

定义 Babel 配置文件 babel.config.js

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

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: [
    new ESLintWebpackPlugin({
      // 指定检查文件的根目录
      context: path.resolve(__dirname, "src"),
    }),
  ],
  mode: "development",
};

评论区 (0)

没有记录
支持 markdown,图片截图粘贴拖拽都可以自动上传。

Webpack5 教程

哪吒

哪吒 · 中级学士

热爱技术，喜欢新东西。

老程序员年度分享MVP
查看更多

最新视频教程

查看更多

最新视频课程

热门文章

热门文档

Laravel 消息通知使用

ace.js 打造一款属于你的 Web 编辑器，入门文档。

Laravel 实现 RBAC 权限管理功能 Permission 包操作

微信小程序等比例图片压缩上传，100%可用，非官方压缩方法

宝塔面板强制绑定账号修改为不强制绑定方案

wap2App 入门讲解，100%速成，全面为你讲解。

Laravel 设置请求头 header 参数

Laravel 的 PhpSpreadsheet 包入门

Laravel 表格操作 Maatwebsite/Laravel-Excel 3.1 最新版本的操作指南

Linux 下如何监听我们的脚本是否掉线了

查看更多

KongQi Laravel Admin2.0 文档安装

KongQi Laravel admin2.0 layui admin 版本序言

易语言入门拖入文件导入到超级列表框表格内

易语言入门易语言定时任务模块

postman 使用手册cookie 使用

谷歌浏览器插件教程proxy 代理

易语言入门判断文件夹是否存在的方法

易语言入门TAB 标签页制作

Visual Studio Code 入门和使用教程插件安装使用

Visual Studio Code 入门和使用教程安装下载

查看更多

订阅会员

类型:
金额:
立即购买

购买学币

学币:
金额:
立即购买

选择支付类型

支付宝电脑支付
微信支付扫码
支付宝扫码支付
立即支付