使用webpack打包TS代码(下)

使项目可以兼容更多的浏览器


  • babel 可以使 TS 转换为一些老浏览器支持的语法。

  • 使用步骤:

    • 使用 npm i -D @babel/core @babel/preset-env babel-loader core-js

    • 修改 webpack.config.js 的配置:

      module: {
          // 指定要加载的规则
      rules: [
            {
              // test 指定的是规则生效的文件
              test: /\.ts$/,
              // 要使用的 loader
              use: [{
                // 指定要用的加载器
                loader: "babel-loader",
                // 设置 babel
                options: {
                  // 设置预定义环境
                  preset: [
                    [
                      // 指定环境的插件
                      "@babel/preset-env",
                      // 配置信息
                      {
                        // 要兼容的目标浏览器
                        targets: {
                          "chrome": "88"
                        },
                        // 指定 corejs 的版本
                        "corejs": "3",
                        // 使用 corejs 的方式
                        "useBuiltIns": "usage"	// 表示按需加载
                      }
                    ]
                  ]
                } 
              },'ts-loader'],
              // 要排除的文件
              exclude: /node_modules/
            }
          ]
        }
      

webpack 在打包时会创建一个立即执行的箭头函数,导致 ie11 不兼容


解决方案:

  • 设置 webpack.config.js 的配置。

    output: {
        path: path.resolve(__dirname, "dist"),
      filename: "bundle.js",
        // 告诉 webpack 不使用箭头函数
      	environment: {
          arrowFunction: false	// 关闭 webpack 的箭头函数,可选
        }
      },
    
使用webpack打包typescript文件,您需要安装以下依赖项: 1. `webpack`: 用于打包应用程序。 2. `webpack-cli`: 用于在命令行上运行webpack。 3. `ts-loader`: 用于加载typescript文件并将其转换为JavaScript。 4. `typescript`: 用于编写typescript代码。 安装这些依赖项后,您可以创建一个webpack配置文件,在此文件中指定您的入口点和输出文件。以下是一个例子: ```javascript // webpack.config.js module.exports = { entry: './src/index.ts', output: { filename: 'bundle.js', path: __dirname + '/dist' }, resolve: { extensions: ['.ts', '.js'] }, module: { rules: [ { test: /\.ts$/, loader: 'ts-loader', exclude: /node_modules/ } ] } }; ``` 在此配置中,我们指定了`entry`和`output`属性,以及`resolve`和`module`属性。`entry`指定应用程序的入口点,`output`指定打包后的文件名和输出目录。`resolve`属性用于指定要解析的文件扩展名。在这种情况下,我们使用`.ts`和`.js`扩展名。`module`属性使用`rules`属性指定将要使用的加载器。在这种情况下,我们使用`ts-loader`来加载和转换typescript文件。 现在,您可以在命令行上运行webpack,它将使用您的配置文件来打包您的应用程序。例如: ``` webpack --config webpack.config.js ``` 这将打包您的应用程序,并将输出文件保存在`dist/bundle.js`中。 注意:在运行webpack之前,您需要确保您的typescript代码是有效的,并且没有任何错误。您可以使用`tsc`命令来编译typescript代码,并查找任何错误。例如: ``` tsc src/index.ts ``` 这将编译`src/index.ts`文件,并生成一个JavaScript文件。如果有任何错误,它们将显示在命令行上。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值