webpack 打字稿生产构建失败

Question

所以基本上我决定在我们的 React 项目中引入打字稿，并且构建在解决没有指定 .ts / .tsx 扩展名的导入时遇到了问题，所以我决定将 ts-loader 添加到我们的 webpack 配置中，但它停止工作了.

const nodeExternals = require('webpack-node-externals');
const paths = require('../config/paths');
const publicPath = paths.servedPath;
const webpack = require('webpack');
const GitRevisionPlugin = require('git-revision-webpack-plugin');
const gitRevisionPlugin = new GitRevisionPlugin({
  versionCommand: 'describe --always --tags',
});

module.exports = {
  mode: 'production',
  bail: true,
  entry: [require.resolve('@babel/polyfill'), paths.appServerJs],
  externals: [nodeExternals()], 
  target: 'node',
  output: {
    // The build folder.
    path: __dirname + '/dist',
    filename: 'loader.js',
    publicPath: publicPath,
    libraryTarget: 'commonjs2'
  },
  plugins: [
    gitRevisionPlugin,
    new webpack.DefinePlugin({
      __BUILD_VERSION__: JSON.stringify(gitRevisionPlugin.version())
    })
  ],
  module: { 
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.ts(x)?$/,
        use: [
          'awesome-typescript-loader'
        ],
        exclude: /node_modules/
      },
      {
        test: /\.css$/,
        loader: 'css-loader'
      },
      {
        test: /\.scss$/,
        loader: 'null-loader'
      },
      {
        test: /\.(gif|jpe?g|png|ico)$/,
        loader: 'url-loader?limit=10000'
      },
      {
        test: /\.(otf|eot|svg|ttf|woff|woff2).*$/,
        loader: 'url-loader?limit=100000'
      },
    ]
  },
  resolve: {
    modules: [paths.appSrc, paths.appServer],
    extensions: ['.ts', '.tsx', '.js', '.jsx']
  }
};

tsconfig.json:

{
    "compilerOptions": {
      "target": "es5",
      "lib": [
        "dom",
        "dom.iterable",
        "esnext"
      ],
      "noImplicitAny": false,
      "strictNullChecks": true,
      "skipLibCheck": true,
      "strict": true,
      "forceConsistentCasingInFileNames": true,
      "noEmit": false,
      "esModuleInterop": true,
      "module": "commonjs",
      "moduleResolution": "node",
      "resolveJsonModule": true,
      "isolatedModules": true,
      "allowSyntheticDefaultImports": true,
      "jsx": "react"
    },
    "exclude": [
      "node_modules"
    ],
    "include": [
      "next-env.d.ts",
      "**/*.ts",
      "**/*.tsx",
    ]
  }

Babelrc:

{
  "compact": true,
  "presets": [
    [
      "@babel/preset-env",
      {
        "modules": false
      }
    ],
      "@babel/preset-react"
  ]
}

构建时出现的错误是：

/app/prod_node_modules/@babel/preset-typescript/test/fixtures/flow-compat/ts-invalid/input.ts
TypeScript error in /app/prod_node_modules/@babel/preset-typescript/test/fixtures/flow-compat/ts-invalid/input.ts(1,13):
Property or signature expected.  TS1131

  > 1 | type Foo = {||};
      |             ^
    2 | 
    3 | foo;
    4 |

我错过了什么吗？我通过以下命令初始化构建：

"build:server": "webpack --config ./server/webpack.config.prod.js",

Answer 1

这里显示的错误是编译一些应该失败的测试数据时的编译失败，来自@babel/preset-typescript包。

这次失败是故意的 - 问题是您一开始就不应该编译该文件。

你没有在这里显示你的 tsconfig，也不清楚你的项目结构是什么，但一般的问题是该文件被包含在构建中，但它不应该包含在构建中。您需要确保仅编译应用程序源中的 TS 文件，而不是每个可能可用的 .ts 文件。

webpack 打字稿生产构建失败

webpack typescript production build fails

typescript

webpack

ts-loader