javascript - Webpack / ts-loader - 编译到 es5 不工作

Question

使用 webpack 和 ts-loader 编译到 es5 时，我仍然可以看到编译后的文件中有箭头函数导致 IE 无法工作，我不确定为什么会这样。

这是我的 webpack.config.js：

const devCerts = require('office-addin-dev-certs')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const CustomFunctionsMetadataPlugin = require('custom-functions-metadata-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const webpack = require('webpack')

const urlDev = 'https://localhost:3000/'
const urlProd = 'https://www.contoso.com/' // CHANGE THIS TO YOUR PRODUCTION DEPLOYMENT LOCATION

async function getHttpsOptions() {
    const httpsOptions = await devCerts.getHttpsServerOptions()
    return {
        cacert: httpsOptions.ca,
        key: httpsOptions.key,
        cert: httpsOptions.cert,
    }
}

module.exports = async (env, options) => {
    const dev = options.mode === 'development'
    const buildType = dev ? 'dev' : 'prod'
    const config = {
        devtool: 'source-map',
        entry: {
            polyfill: ['core-js/stable', 'regenerator-runtime/runtime'],
            vendor: ['react', 'react-dom', 'core-js', '@fluentui/react'],
            functions: './src/functions/functions.ts',
            taskpane: ['react-hot-loader/patch', './src/taskpane/index.tsx'],
            commands: './src/commands/commands.ts',
        },
        output: {
            devtoolModuleFilenameTemplate:
                'webpack:///[resource-path]?[loaders]',
            clean: true,
        },
        resolve: {
            extensions: ['.ts', '.tsx', '.html', '.js'],
        },
        module: {
            rules: [
                {
                    test: /\.tsx?$/,
                    use: ['react-hot-loader/webpack', 'ts-loader'],
                    exclude: /node_modules/,
                },
                {
                    test: /\.html$/,
                    exclude: /node_modules/,
                    use: 'html-loader',
                },
                {
                    test: /\.(png|jpg|jpeg|gif|ico)$/,
                    type: 'asset/resource',
                    generator: {
                        filename: 'assets/[name][ext][query]',
                    },
                },
                // we could add support for scss here
                {
                    test: /\.css$/,
                    use: ['style-loader', 'css-loader'],
                },
            ],
        },
        plugins: [
            new CustomFunctionsMetadataPlugin({
                output: 'functions.json',
                input: './src/functions/functions.ts',
            }),
            new HtmlWebpackPlugin({
                filename: 'functions.html',
                template: './src/functions/functions.html',
                chunks: ['polyfill', 'functions'],
            }),
            new HtmlWebpackPlugin({
                filename: 'taskpane.html',
                template: './src/taskpane/taskpane.html',
                chunks: ['taskpane', 'vendor', 'polyfills'],
            }),
            new CopyWebpackPlugin({
                patterns: [
                    {
                        from: 'manifest*.xml',
                        to: '[name].' + buildType + '[ext]',
                        transform(content) {
                            if (dev) {
                                return content
                            } else {
                                return content
                                    .toString()
                                    .replace(new RegExp(urlDev, 'g'), urlProd)
                            }
                        },
                    },
                ],
            }),
            new HtmlWebpackPlugin({
                filename: 'commands.html',
                template: './src/commands/commands.html',
                chunks: ['commands'],
            }),
            new webpack.ProvidePlugin({
                Promise: ['es6-promise', 'Promise'],
            }),
        ],
        target: ['browserslist'],
        devServer: {
            hot: true,
            static: [__dirname],
            headers: {
                'Access-Control-Allow-Origin': '*',
            },
            https:
                env.WEBPACK_BUILD || options.https !== undefined
                    ? options.https
                    : await getHttpsOptions(),
            port: process.env.npm_package_config_dev_server_port || 3000,
        },
    }

    return config
}

这是我的 babel.config.json

{
    "presets": ["@babel/preset-typescript"]
}

package.json 浏览器列表：

  "browserslist": [
    "edge >= 16",
    "safari >= 9",
    "firefox >= 57",
    "ie >= 11",
    "ios >= 9",
    "chrome >= 49"
  ]

和 tsconfig.json；

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "jsx": "react",
        "moduleResolution": "node",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "removeComments": false,
        "outDir": "dist",
        "allowUnusedLabels": false,
        "noImplicitReturns": true,
        "noUnusedParameters": false,
        "noUnusedLocals": false,
        "lib": ["es7", "dom"],
        "pretty": true,
        "typeRoots": ["node_modules/@types", "src/taskpane/utils/types.d.ts"],
        "esModuleInterop": true
    },
    "exclude": ["node_modules", "dist", "lib", "lib-amd"],
    "compileOnSave": false,
    "buildOnSave": false
}

我读到也可以使用 polyfill，但理想情况下，代码会在构建时转换为 es5。

标签： javascriptwebpackbabeljsoffice-js