Question

我正在尝试为浏览器设置TypeScript + Webpack工作流程，并支持async / await等最新功能。这是我得到的：

ERROR in ./client/src/components/HelloWorld.tsx
Module not found: Error: Can't resolve 'imports' in '/home/vinz243/compactd/client/src/components'
 @ ./client/src/components/HelloWorld.tsx 1:0-65
 @ ./client/src/index.tsx

这是我的文件夹树：

.
|-- client
|   |-- dist
|   |-- index.html
|   |-- src
|   |   |-- components
|   |   |   `-- HelloWorld.tsx
|   |   |-- definitions
|   |   |   `-- main.d.ts
|   |   |-- index.tsx
|   |   `-- styles
|   `-- tsconfig.json
|-- config
|   |-- webpack.base.js
|   `-- webpack.development.js
|-- package.json
`-- webpack.config.js

以下是config/webpack.base.js

const path = require('path');
const webpack = require('webpack');

module.exports = {
  entry: {
    application: "./client/src/index.tsx",
    vendor: ['react', 'react-dom', 'react-redux', 'react-router', 'react-router-redux', 'redux']
  },
  output: {
    filename: "bundle.js",
    path: path.join(__dirname, "../client/dist")
  },

  resolve: {
    extensions: [".ts", ".tsx", ".js", ".json", ".scss"],
    alias: {
    }
  },
  plugins: [
    new webpack.ProvidePlugin({
      'fetch': 'imports?this=>global!exports?global.fetch!whatwg-fetch'  // fetch API
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      filename: 'vendor.bundle.js',
      minChunks: Infinity
    })
  ],
  module: {
    rules: [
      // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
      {
        test: /\.tsx?$/,
        loader: "awesome-typescript-loader",
        options: {
          configFileName: 'client/tsconfig.json'
        }
      },

      // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
      { enforce: "pre", test: /\.js$/, loader: "source-map-loader" },
      {
         test: /\.scss$/,
         ...
       }
    ]
  }
};

client/tsconfig.json：

{
  "compilerOptions": {
    "sourceMap": true,
    "noImplicitAny": true,
    "module": "commonjs",
    "target": "es2015",
    "jsx": "react",
    "lib": ["dom", "es2017"]
  },
  "include": [
    "./src/**/*"
  ]
}

这是client/src/components/HelloWorld.tsx：

import * as React from "react";
import './HelloWorld.scss';

export interface HelloProps { compiler: string; framework: string; }

// 'HelloProps' describes the shape of props.
// State is never set so we use the 'undefined' type.
export class Hello extends React.Component<HelloProps, undefined> {
  componentDidMount () {
    async function test () {
      await fetch('google.com');
    }

    test();
  }
  render() {
    const {props} = this;
    return <h1 className="hello-world">Hello, from {this.props.compiler} and {this.props.framework}!</h1>;
  }
}

如果我尝试定位es5它告诉我需要一个Promise构造函数，我尝试将bluebird导入为Promise，但是TS然后会说受保护的命名空间或类似的东西这一点。

Answer 1

该错误与async / await无关，而与您在fetch中指定的ProvidePlugin的导入无关。它已不再允许omit the -loader suffix。

使用您提供的配置，webpack显示以下错误：

Module not found: Error: Can't resolve 'imports'
BREAKING CHANGE: It's no longer allowed to omit the '-loader' suffix when using loaders.
                 You need to specify 'imports-loader' instead of 'imports',
                 see https://webpack.js.org/guides/migrating/#automatic-loader-module-name-extension-removed

您需要使用imports-loader和exports-loader，因此ProvidePlugin应为：

new webpack.ProvidePlugin({
  'fetch': 'imports-loader?this=>global!exports-loader?global.fetch!whatwg-fetch'
}),

在typescript throws中添加await / async无法解析'imports'

1 个答案: