使用 webpack 打包 typescript(.ts)； babel.js 做低版本浏览器兼容

最新推荐文章于 2024-08-20 15:46:41 发布
最新推荐文章于 2024-08-20 15:46:41 发布
阅读量1.1k 收藏
点赞数
文章标签： javascript webpack typescript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cc_King/article/details/127438053
版权
本文详细介绍了如何从零开始配置webpack，包括使用npminit-y初始化项目，安装webpack及相关依赖，设置基础配置，集成typescript环境，使用babel处理低版本浏览器兼容，配置编译时删除历史dist文件，指定html模板，以及实现热编译和不同模式的编译。通过这个过程，读者可以掌握完整的webpack与typescript结合的项目构建流程。
摘要由CSDN通过智能技术生成

文章目录

1. 使用 npm init -y 初始化项目

2. 安装webpack相关依赖包

  1. cnpm i webpack webpack-cli -D;

3. webpack 最基础配置

3.1 在项目根目录下创建 webpack 的配置文件 webpack.config.js, 进行下列最基本配置;

const path = require("path");

module.exports = {
  // 入口文件
  entry: "./src/index.js",

  // 输出路径
  output: {
    filename: "bundle.js", // 输出文件名称
    path: path.resolve(__dirname, "./dist"), // 输出路径
  },
};

3.2 编辑 package.json 文件，添加打包命令;

  • 在 scripts 中添加 "build": "webpack"， 最终结果如下
"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "build": "webpack"
}
  • npx webpack 或直接执行 npx 进行打包编译;

3.3 npm run build 运行打包工具

  • 要根据 webpack.config.js 配置文件中入口文件的配置，创建有符合路径的入口文件。

4. 配置 typescript 打包环境

4.1 cnpm i typescript ts-loader -D

4.2 在 webpack.config.js 中配置 typescript 的编译配置

const path = require("path");

module.exports = {
  // 入口文件
  entry: "./src/index.ts", // ************ --- 这里修改为 ts 文件

  // 输出路径
  output: {
    filename: "bundle.js", // 输出文件名称
    path: path.resolve(__dirname, "./dist"), // 输出路径
  },

  module: {
    rules: [
      {
        // 按规则匹配需要进行加载的文件
        test: /\.ts$/,
        // 使用加载器的名称 
        use: 'ts-loader',
        // 排除不需要加载的文件
        exclude: /node_modules/,
      }
    ]
  },
}

4.3 tsconfig.json ts 的编译配置文件

  • 在根目录下创建 ts 的编译配置文件 tsconfig.json， 直接创建，空文件也可以生效;
  • 或使用 tsc --init 生成配置文件， 此配置文件含有一些默认配置，需要按需修改；

运行 npm run build 即可进行ts编译;

5. babel 低版本浏览器兼容

5.1 cnpm i @babel/core @babel/preset-env babel-loader core-js -D;

5.2 修改配置文件 webpack.config.js;

module.exports = {
  output: {
    // 1. *** --- 设置webpack不使用箭头函数 --- ***/
    environment: {
      arrowFunction: false,
    },
  },

  module: {
    rules: [
      {
        // 按规则匹配需要进行加载的文件
        test: /\.ts$/,
        // 使用加载器的名称 
        // 加载器运行顺序， 由后往前；(此处: 先通过ts-loader将ts编译为js， 然后使用babel-loader进行兼容性处理)
        use: [

          // 2. *** --- babel最重要的一坨配置 --- *** //
          {
            loader: 'babel-loader',
            options:{
              presets: [
                [
                  "@babel/preset-env",
                  {
                    // 配置需要兼容的浏览器
                    targets: {
                      "chrome": "79",
                      "ie": "11",
                    },
                    // 指定core-js版本
                    "corejs": "3",
                    // 设置core-js的使用方式
                    "useBuiltIns": "usage", // usage: 按需加载
                  }
                ]
              ],
            },
          },
          // *** --- / 2. babel最重要的一坨配置 --- *** //

          'ts-loader',
        ],
        // 排除不需要加载的文件
        exclude: /node_modules/,
      }
    ]
  },
}

6. 编译时自动删除已有的历史 dist 文件

6.1 cnpm i clean-webpack-plugin -D: 安装第三方插件；

6.2 修改配置文件

const { CleanWebpackPlugin } = require("clean-webpack-plugin")

module.exports = {
  // ... 其余配置
  plugins: [
    new CleanWebpackPlugin(),
  ],
}

7. 指定html模板

  • cnpm i html-webpack-plugin -D: 安装依赖；
  • 修改配置文件
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  // ... 其余配置
  plugins: [
    new CleanWebpackPlugin(),
    // 指定模板文件
    // 插件会自动将编译出来的入口文件(./dist/bundle.js)引入到 html 文件中;
    // 如果html没有需要特殊配置,可直接省略指定模板文件, 如下:
    // new HtmlWebpackPlugin()
    new HtmlWebpackPlugin({
      template: "./index.html", 
    }),
  ],
}

8. 热编译 & mode编译模式

动态监听ts文件改变，自动编译；

  • cnpm i webpack-dev-server -D
  • 配置调试命令
"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "build": "webpack",
  // --open: 自动打开默认浏览器
  // --mode=development: 指定调试模式为开发(development)模式
  // --mode=production: 指定调试模式为生产(production)模式
  "dev": "webpack serve --open --mode=development",
  "prod": "webpack serve --open --mode=production"
}
  • 查看当前调试模式
console.log(process.env.NODE_ENV);
  • cnpm run dev: 开启调试

最终状态

安装所有依赖

cnpm i -D webpack webpack-cli typescript ts-loader @babel/core @babel/preset-env babel-loader core-js clean-webpack-plugin html-webpack-plugin webpack-dev-server

webpack.config.js 配置文件最终状态

const path = require("path");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  // 入口文件
  entry: "./src/index.ts",

  // 输出路径
  output: {
    filename: "bundle.js", // 输出文件名称
    path: path.resolve(__dirname, "./dist"), // 输出路径
    // 设置webpack不使用箭头函数
    environment: {
      arrowFunction: false,
    },
  },

  module: {
    rules: [
      {
        // 按规则匹配需要进行加载的文件
        test: /\.ts$/,
        // 使用加载器的名称 
        // 加载器运行顺序， 由后往前；(此处: 先通过ts-loader将ts编译为js， 然后使用babel-loader进行兼容性处理)
        use: [

          // *** --- babel最重要的一坨配置 --- *** //
          {
            loader: 'babel-loader',
            options: {
              presets: [
                [
                  "@babel/preset-env",
                  {
                    // 配置需要兼容的浏览器
                    targets: {
                      "chrome": "79",
                      "ie": "11",
                    },
                    // 指定core-js版本
                    "corejs": "3",
                    // 设置core-js的使用方式
                    "useBuiltIns": "usage", // usage: 按需加载
                  }
                ]
              ],
            },
          },
          // *** --- / babel最重要的一坨配置 --- *** //
          'ts-loader',
        ],
        // 排除不需要加载的文件
        exclude: /node_modules/,
      }
    ]
  },

  plugins: [
    new CleanWebpackPlugin(),
    // 指定模板文件
    // 插件会自动将编译出来的入口文件(./dist/bundle.js)引入到 html 文件中;
    // 如果html没有需要特殊配置,可直接省略指定模板文件, 如下:
    // new HtmlWebpackPlugin()
    new HtmlWebpackPlugin({
      template: "./index.html",
    }),
  ],
}

package.json 文件最终状态

{
  "name": "typescript",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --mode=production",
    "dev": "webpack serve --open --mode=development",
    "prod": "webpack serve --open --mode=production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.19.6",
    "@babel/preset-env": "^7.19.4",
    "babel-loader": "^8.2.5",
    "clean-webpack-plugin": "^4.0.0",
    "core-js": "^3.25.5",
    "html-webpack-plugin": "^5.5.0",
    "ts-loader": "^9.4.1",
    "typescript": "^4.8.4",
    "webpack": "^5.74.0",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^4.11.1"
  }
}

tsconfig.json 文件最终状态

  • 此文件使用 tsc --init 自动生成，不予展示；

目录结构

在这里插入图片描述

至此：.ts 文件的 webpack 打包功能就实现了

Jarvis¿
关注
Vue3 + Typescript 兼容低版本 Chrome
Tine Aine
12-30 8187
最近新开一个项目，使用了最新的Vue3和Typescript，但发现在客户浏览器中白屏（空页面），得知他们使用的浏览器版本居然是Chrome 49，但客户太多，根本无法要求他们统一更换新版本的浏览器，只能考虑适配这种低版本的浏览器。 一般这种情况都需要通过Babel去做转换，我们是Vue3 Cli项目，实际上Vue项目在创建时就引入的Babel，直接使用即可 修改浏览器兼容列表配置(.browserslistrc) 项目根目录下有一个.browserslistrc文件，打开，通过井号注释掉原先的内容，改为：
webpack + typescript + babel打包*.min.js文件的环境配置
weixin_30625691的博客
06-20 563
将多个*.ts文件打包成一个*.min.js文件的开发配置 1、初始化 npm init 新建以下文件目录： 2、安装依赖： "devDependencies": { "@babel/core": "^7.4.5", "@babel/preset-env": "^7.4.5", "babel-loader": "^8.0.6", ...
webpack.config.js兼容IE、低版本浏览器的方法
qj11803017的博客
10-29 1186
安装babel cnpm i -D @babel/core @babel/preset-env babel-loader core-js webpack.config.js配置 module.exports = { /*指定入口文件*/ entry: { app: ["babel-polyfill", "./src/main.ts"] }, /* 输出配置 */ output: { path: 'dist', // 输出目录 // 告诉webpack不使用箭
使用webpack + TS + Babel
最新发布
a2739294436的博客
08-20 319
webpack //构建工具webpackwebpack-cli //webpack的命令行工具webpack-dev-server //webpack的开发服务器typescript //ts编译器ts-loader //ts加载器，用于在webpack中编译ts文件html-webpack-plugin //webpack中html插件，用来自动创建html文件。
typescript学习笔记2 配置浏览器兼容性
qq_24986271的博客
06-10 639
webpack.config.js需要安装的插件： （1）其中最重要的的是environment 属性,ts兼容性流程是ts-loader将ts变成js，这一步只是转成对应的版本的语言，没有做兼容性，然后babel-loader在将js转为模板兼容浏览器，所能执行的代码，再由webpack打包，最后一步默认会使用箭头函数，所以低版本浏览器使用了babel依然会报错，所以低版本浏览器不应该使用箭头函数 （2）loader是从后向前执行的，contentBase: “./dist” 最新版本中不能用...
煦涵说Webpack-IE低版本兼容指南
weixin_33882452的博客
06-01 334
Webpack，Webpack 是一个前端资源加载/打包工具，现在版本已经 release 到 v2.6.1，今天的文章不支持介绍Webpack的API及使用，而是对最近项目开发中使用Webpack打包时处理IE低版本(IE8及以下)浏览器兼容问题做一次总结。issue直达，如果文章对您有帮助欢迎 star !!! PC端项目前端基础技...
TypeScript中的webpack和Babel(三)
前端与计算机相关知识的分享，博主的qq523235674
07-11 452
（1）通常情况下，实际开发中我们都需要使用构建工具对代码进行打包，TS同样也可以结合构建工具一起使用，下边以webpack为例介绍一下如何结合构建工具使用TS。进入项目根目录，执行命令 主要作用：创建package.json文件根目录执行命令 共安装了7个包①webpack构建工具webpack②webpack-cliwebpack的命令行工具③webpack-dev-serverwebpack的开发服务器④typescriptts编译器⑤ts-loaderts加载器，用于在webpack中编译ts文件
使用webpack打包编译TypeScript代码
weixin_52139094的博客
06-28 869
TypeScript打包 webpack整合 通常情况下，实际开发中我们都需要使用构建工具对代码进行打包； TS同样也可以结合构建工具一起使用，下边以webpack为例介绍一下如何结合构建工具使用TS； 步骤如下： 初始化项目 进入项目根目录，执行命令 npm init -y，创建package.json文件 下载构建工具 命令如下： npm i -D webpack webpack-cli webpack-dev-server typescript ts-loader clean-webpack-plug
typescript | 了解typescript + 搭建typescript开发环境 +类型声明 + 编译选项 + 使用webpack打包ts代码 +Babel
不爱吃菜的菜菜的博客
09-20 329
typescript的学习
webpack-develop.zip
11-01
7. **ES6和TypeScript支持**：Webpack默认支持ES6语法，通过`babel-loader`将其转换为广泛兼容的ES5。若项目使用TypeScript，`ts-loader`则负责TypeScript的编译。 8. **静态资源处理**：Webpack通过配置能够处理...
【react笔记】关于在webpack.config.dev.js和webpack.config.prod.js里配置antd
supercolorpower的博客
12-21 8347
在.babelrc中配置antd的方法移步官网https://ant.design/docs/react/introduce-cn 另一种方法的前提是我们已经将配置文件暴露出来了。暴露方法https://blog.csdn.net/weixin_41606276/article/details/85123919 因为我的脚手架版本较高，所以现在网上的方法都不适用。在我的不断尝试下，终于配置成功...
Babel解决ES6语法无法在浏览器兼容问题
lilong329329的博客
04-07 540
问题1：babel : 无法加载文件 C:\Users\win\AppData\Roaming\npm\babel.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https:/ go.micros 问题2：get-ExecutionPolicy 获取的结果为：Restricted 解决： 1、用PowerShell,以管理员的身份运行，注意：必须用PowerShell 和管理员身份 2、使用命令：get-ExecutionPolicy 查看获取的结果是否为：Restricted ..
TypeScript系列（二）- Webpack打包TS代码
Zong_0915的博客
04-18 2685
TypeScript系列（二）- Webpack打包TS代码一. webpack打包TS代码(手动搭建)1.1 安装webpack依赖1.2 webpack整合1.3 webpack自动生成HTML文件1.4 增加配置实现项目自动重构1.4.1 安装插件实现重构代码时删除旧文件1.4.2 配置TS模块化二. 引入babel解决兼容问题 TypeScript系列文章导航 一. webpack打包TS代码(手动搭建) 首先，我们应该关注下package.json这个文件，它是用来管理项目的一个配置文件（比如
babel向后兼容
Eliaukoyx
05-12 224
除了webpack，开发中还经常需要结合babel来对代码进行转换以使其可以兼容到更多的浏览器。 1、安装依赖包： npm i -D @babel/core @babel/preset-env babel-loader core-js @babel/core：babel的核心工具 @babel/preset-env：babel的预定义环境 @babel-loader：babel在webpack中的加载器 core-js：core-js用来使老版本的浏览器支持新版ES语法 2、修改webpack.c
webpack, js 兼容性处理
c_liufeng的博客
12-05 245
js兼容性处理 首先下载基本架包babel-loader @babel/core 1.基本js兼容性处理 @babel/preset-env 只能处理基本js语法，想promise。。。。无法处理 2.全部js兼容性处理@babel/polyfill 相当与一次性引入所有处理后js代码，比如全部引入element-ui。以至于架包太大。 3.兼容性的按需引入core-js { test:/\.js$/, exclude:/node_
关于webpack4.x版本不兼容低版本浏览器问题IE,低版本chrome解决方案
weixin_39370315的博客
01-03 2568
前言，原本项目支持为Chrome60版本，那么我们项目是没有问题的，无奈，用户群突然需要使用低版本的chrome30版本的浏览器，这不一片空白，控制台的错误就出来了，很明显的ES6语法不兼容，可是让我郁闷且奇怪的是，分明用了babel，为何还会出现如此错误！ 报错故障为 SyntaxError: Use of const in strict mode. 关于这个错误，主要还是ES6语法在低版本浏览...
vite项目低版本浏览器兼容性问题
a404352329的博客
04-03 3596
该语句是ES6的新语法，一般浏览器都没有问题，但低版本的浏览器无法解析该语句，所以要进行js转换，一般的vue2项目我们会使用babel，但vite里不好使用babel，需引入另一个插件，他可以把指定文件转译成目标文件，如ts->js，话不多说，贴代码。用火狐浏览器访问，没有报错，开始狂摆...时间一点点流逝，全网没有找到解决方法....，测试了90版本，页面出来了！配置完，重新打包继续测试，内网的70浏览器已经可以打开，可是65还是不行！考虑让用户直接升级浏览器，好像不现实，只能默默的解决65的问题。
移动端低版本浏览器兼容问题处理方案
ZT_KEBEI的博客
12-27 589
【代码】移动端低版本浏览器兼容问题处理方案。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值