5.学习webpack配置 babel基本配置

babel是一个javascript编译工具,其主要功能是将新版本的JavaScript代码(如es6+)转换为旧版本的代码(如es5),以便能够在旧版本的浏览器或环境中运行。一般配合webpack使用。

使用npm i -D @babel/core @babel/preset-env babel-loader core-js安装babel相关依赖

配置webpack.config.js

我们需要在webpack.config.js中配置babel相关内容

javascript 复制代码
// nodejs的模块 帮助我们拼接路径
const path = require("path");
// 引入html插件
const HTMLWebPackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
// webpack中所有的配置信息 都应该写在module.exports中
module.exports = {
  //指定入口文件
  entry: "./src/index.ts",
  // 指定打包文件所在的目录
  output: {
    //指定打包后的目录
    path: path.resolve(__dirname, "dist"),
    // 打包后文件的名字
    filename: "bundle.js",
  },
  mode: "development", // 设置mode
  // 指定webpack打包时 使用的模块
  module: {
    // 指定要加载的规则
    rules: [
      {
        // test指定的是规则生效的文件
        test: /\.ts$/, //匹配所有的以ts结尾的文件
        use: [
          // 配置babel
          {
            // 指定加载器
            loader: "babel-loader",
            // 设置babel
            options: {
              //设置预定义的环境
              presets: [
                [
                  // 指定环境插件
                  "@babel/preset-env",
                  // 配置信息
                  {
                    // 指定浏览器的版本
                    targets: {
                      chrome: "58",
                      ie: "11",
                    },
                    // 指定corejs的版本
                    corejs: "3",
                    // 使用corejs的方法 "usage" 表示按需加载
                    useBuiltIns: "usage",
                  },
                ],
              ],
            },
          },
          "ts-loader",
        ], //用tsloader来处理以ts结尾的文件
        exclude: /node-modules/, //排除文件
      },
    ],
  },

  // 配置webpack插件
  plugins: [
    new HTMLWebPackPlugin({
      template: "./src/index.html",
    }),
    new CleanWebpackPlugin(),
  ],
  resolve: {
    extensions: [".ts", ".js"],
  },
  // npm i -D @babel/core @babel/preset-env(定义好了很多环境)
  // npm i -D @babel/core @babel/preset-env babel-loader core-js
};

当我们兼容某些旧版本的浏览器时候,比如ie11,他不兼容es6的低版本代码,所以执行npm run build的时候会生成低版本的javascript代码

打包以后使用const定义的obj就会发现已经改成了var了 因为低版本的javascript是没有const let相关语法的。

corejs

就是javascript的补丁,在遇到低版本的浏览器的时候,他会作为工具箱,给低版本的javascript提供某些高版本的功能如Promise

比如当我们的项目使用了Promise,没有安装corejs,即使是有babel也是没用的,安装了corejs会解决这一问题

当我们尝试打印Promise 并且在webpack.config.js中添加了ie11以及corejs的配置后,编译后文件就会写入corejs自己封装的Promise,

但是如果我们运行在ie11的浏览器环境下,会发现打印依然出错,无论使不使用Promise,因为我门webpack默认编译为一个自执行的箭头函数,在低版本的javascript语法中,是没有箭头函数这个语法的,所以我们需要在webpack.config.js中配置一下。

environment: {

arrowFunction: false,

},

javascript 复制代码
  output: {
    //指定打包后的目录
    path: path.resolve(__dirname, "dist"),
    // 打包后文件的名字
    filename: "bundle.js",
    environment: {
      arrowFunction: false,
    },
  },

这样我们打包出来的文件就不是箭头函数了

相关推荐
我的写法有点潮16 小时前
Scss 的四种导入方式你都知道吗
前端·css
云飞云共享云桌面16 小时前
SolidWorks对电脑的硬件配置要求具体有哪些
java·服务器·前端·网络·数据库
鹏程十八少16 小时前
11. Android <卡顿十一>深入ASM与Transform进行插桩,手写微信Matrix插件,打造自己的Matrix工具(卡顿进阶)
前端
小桥风满袖16 小时前
极简三分钟ES6 - 箭头函数
前端·javascript
bug_kada16 小时前
前端后端3步联调:Cookie认证实战,让登录功能完美上线!
前端·javascript
stringwu16 小时前
Flutter开发者必备:状态管理Bloc的实用详解
前端·flutter
青晚舟16 小时前
作为前端你必须要会的CICD
前端·ci/cd
hj5914_前端新手16 小时前
深入分析 —— JavaScript 深拷贝
前端·javascript
中微子16 小时前
虚拟列表完全指南:从零到一手写实现
前端
jqq66616 小时前
解析ElementPlus打包源码(二、buildFullBundle)
前端·javascript·vue.js