Question

因此，基本上我决定将typescript引入我们的react项目，并且该构建在解析导入时未指定.ts / .tsx扩展名时遇到问题，因此我决定将ts-loader添加到我们的webpack配置中，并且它停止工作。 / p>

git branch recovered-B <old position hash>

tsconfig.json：

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']
  }
};

Babelrc：

{
    "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",
    ]
  }

构建时出现的错误是：

{
  "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 |

Answer 1

此处显示的错误是从@babel/preset-typescript包内部编译某些应该失败的测试数据时的编译失败。

此失败是有意的-问题是您不应该首先编译该文件。

您尚未在此处显示tsconfig，也不清楚您的项目结构是什么，但是一般的问题是该文件已包含在构建中，而不应该包含在内。您需要确保仅编译来自应用程序源的TS文件，而不是每个可能可用的.ts文件。

webpack打字稿生产构建失败

1 个答案: