使用Webpack将TypeScript转换为es5

问题描述

我创建了一个非常简单的环境来试用TypeScript和Webpack。我已尽可能地遵循在线示例，但是构建的输出包含() =>，应该将其更改为ES5语法。请注意，我没有使用Babel-据我所知TypeScript应该能够在没有它的情况下生产ES5。

这是我package.json的一部分：

  "devDependencies": {
    "ts-loader": "8.0.7","typescript": "4.0.3","webpack": "5.2.0","webpack-cli": "4.1.0","webpack-dev-server": "3.11.0"
  },"scripts": {
    "build": "webpack"
  },

这是我的tsconfig.json：

{
    "compilerOptions": {
        "outDir": "./dist/","sourceMap": true,"noImplicitAny": true,"module": "ES2020","target": "ES5","allowJs": true
    }
}

这是webpack.config.js：

const path = require('path');

module.exports = {
    entry: './src/index.ts',devtool: 'inline-source-map',module: {
        rules: [
            {
                test: /\.tsx?$/,use: 'ts-loader',exclude: /node_modules/,},],resolve: {
        extensions: [ '.tsx','.ts','.js' ],output: {
        filename: 'my-library.js',path: path.resolve(__dirname,'dist'),};

这是src / index.ts：

export const myObj = {
    visual: "the visual",audio: "the audio"
}

完成npm run build之后，我在dist / my-library.js中得到以下内容：

(()=>{"use strict";var r={607:(r,e,t)=>{}},e={};function t(o){if(e[o])return e[o].exports;var n=e[o]={exports:{}};return r[o](n,n.exports,t),n.exports}t.d=(r,e)=>{for(var o in e)t.o(e,o)&&!t.o(r,o)&&Object.defineProperty(r,o,{enumerable:!0,get:e[o]})},t.o=(r,e)=>Object.prototype.hasOwnProperty.call(r,e),t(607)})();

请注意，即使我指定了“ ES5”，该代码也无法在旧版浏览器上运行。

文件夹结构为：

dist
  my-library.js
src
  index.ts
package.json
tsconfig.json
webpack.config.js

我想念什么？谢谢。

解决方法

您可能正在使用webpack5作为target引入了对es6 +的支持。 您看到的代码是Webpack生成的代码（它是运行时代码），您可以指定它应该使用es5。

// webpack.config.js

const path = require('path');

module.exports = {
    entry: './src/index.ts',devtool: 'inline-source-map',target: 'es5',// ------ ^
    module: {
        rules: [
            {
                test: /\.tsx?$/,use: 'ts-loader',exclude: /node_modules/,},],resolve: {
        extensions: [ '.tsx','.ts','.js' ],output: {
        filename: 'my-library.js',path: path.resolve(__dirname,'dist'),};

有关更多选项，请查看the docs

,

如果您使用的是 Webpack 5，文档说明：

module.exports = {
  // ...
  target: ['web','es5'],};

https://webpack.js.org/configuration/target/#string-1