首页 > 其他分享 >webpack,babel配置项目适配IE11

webpack,babel配置项目适配IE11

时间:2024-01-15 18:38:23浏览次数:27  
标签:false 适配 environment webpack babel const supports

package.json

"browserslist": [
    "ie 11"
  ]

 

webpack.config.js

const path = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

module.exports = {
  entry: './src/index.ts',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    environment: { // 必须
      // The environment supports arrow functions ('() => { ... }').
      arrowFunction: false,
      // The environment supports BigInt as literal (123n).
      bigIntLiteral: false,
      // The environment supports destructuring ('{ a, b } = obj').
      destructuring: false,
      // The environment supports an async import() function to import EcmaScript modules.
      dynamicImport: false,
      // The environment supports 'for of' iteration ('for (const x of array) { ... }').
      forOf: false,
      // The environment supports ECMAScript Module syntax to import ECMAScript modules (import ... from '...').
      module: false,
      // The environment supports optional chaining ('obj?.a' or 'obj?.()').
      optionalChaining: false,
      // The environment supports template literals.
      templateLiteral: false,
    }
  },
  target: ['web', 'es5'], // 必须
  module: {
    rules: [
      {
        test: /\.(ts|js)$/,
        exclude: /node_modules/, // 排除依赖里的代码
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: [
                [
                  '@babel/preset-env',
                  {
                    useBuiltIns: 'usage',
                    corejs: '3.35.0'
                  }
                ]
              ],
              plugins: ['@babel/plugin-transform-runtime']
            }
          },
          'ts-loader'
        ]
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin(),
    new htmlWebpackPlugin()
  ],
  resolve: {
    extensions: ['.ts', '.js']
  }
}

 

标签:false,适配,environment,webpack,babel,const,supports
From: https://www.cnblogs.com/yaokunlun/p/17965982

相关文章

  • spring与设计模式之四适配器模式
    一、定义适配器模式-或者称为转接口模式,变压器模式。通过适配,可以让原来提供特定功能的对象完成另外一个标准的功能。所以,所谓的适配应该可以这样称呼:让某些类/接口适配/转换某个标准/功能。适配器器的重点是适配,就是新增(装饰)。为了便于记忆和理解,读者最好根据自己的习惯来命......
  • 现代 CSS 解决方案:文字颜色自动适配背景色!
    现代CSS解决方案:文字颜色自动适配背景色! 在23年的CSS新特性中,有一个非常重要的功能更新-- 相对颜色。简单而言,相对颜色的功能,让我们在CSS中,对颜色有了更为强大的掌控能力。其核心功能就是,让我们能够基于一个现有颜色A,通过一定的转换规则,快速生成我们想要的颜色......
  • JS常用工具:Webpack 和 JShaman分别有什么用?
    Webpack和JShaman是两个不同的工具,它们的特点和用途也不同。Webpack是一个前端资源模块打包工具,主要用于将各种静态资源(如JavaScript、CSS、图片等)视为模块,并将其打包成浏览器可以识别的代码。Webpack的特点包括:1.模块化:Webpack将各种资源视为模块,使开发者能够更好地组织和管理项......
  • JS常用工具:Webpack 和 JShaman分别有什么用?
    Webpack和JShaman是两个不同的工具,它们的特点和用途也不同。Webpack是一个前端资源模块打包工具,主要用于将各种静态资源(如JavaScript、CSS、图片等)视为模块,并将其打包成浏览器可以识别的代码。Webpack的特点包括:1.模块化:Webpack将各种资源视为模块,使开发者能够更好地组织和管理......
  • Webpack的使用
    Webpack是现在最流行的Web构建框架,本文章的讲解的基本技能内容图如下:1、webpack基本使用webapck是什么webpack是一种前端资源构建的工具,一个静态模块打包器(modulebundler)。在webpack看来,前端的所有资源文件(js/json/css/img/less/...)都会作为模块处理(chunk)。它根据模块......
  • Python实现软件设计模式7:适配器模式 Adapter Pattern
    动机有两个不存在直接继承或关联关系的类A、B,A希望能利用到B类中某个已存在的、功能完善的方法,而不再去具体实现A的接口源码;适配器模式使接口不兼容的那些类可以一起工作。主要角色目标类Target抽象接口类适配者Adaptee适配器Adapter具体实现接口客户端C......
  • flowable适配人大金仓Kingbase数据库
    背景因为国产化的需求,需要把现有项目的数据库改成人大金仓,适配某个项目的时候因为使用了没适配Kingbase的flowable,导致无法启动。原本使用的是Oracle数据库,kingbase兼容Oracle数据库,可以直接当成Oracle来使用。错误1:couldn'tdeductdatabasetypefromdatabaseproductnam......
  • 适配 iphone 底部刘海
    在需要适配的页面,元素增加样式。特有的变量safe-area-inset-bottom\safe-area-inset-bottom建议这种通用性设置,提供一个基础公共组件page.通过定义插槽nav\header\main\footer插入内容。这是一些公共的样式就不用每个页面去设置。.footer{padding-bottom:0;......
  • webpack指南(代码分离)
    代码分离常用的代码分离方法有三种:入口起点:使用 entry 配置手动地分离代码。防止重复:使用 入口依赖 或者 SplitChunksPlugin 去重和分离chunk动态导入:通过模块的内联函数调用分离代码。入口起点 projectwebpack-demo|-package.json|-package-lock.json|-......
  • vue&webpack - vue2版本webpack脚手架配置梳理
    vue&webpack-vue2版本webpack脚手架配置梳理资源链接VueCLIwebpackwebpack5和webpack4的区别webpackWebpack4于2018年2月发布。(2020-10-10)webpack5.0.0发布VUECLI配置configureWebpackvue.config.js中的configureWebpack选项提供一个对象://vue.con......