Javascript 在typescript抛出中添加wait/async可以'；t解决'；进口'；

我正在尝试为浏览器设置一个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>;
  }
}

import*as React from“React”；
导入“/HelloWorld.scss”；
导出接口HelloProps{compiler:string；framework:string；}
//“HelloProps”描述道具的形状。
//状态从未设置，因此我们使用“未定义”类型。
导出类Hello扩展React.Component{
组件安装（）{
异步函数测试（）{
等待获取（'google.com'）；
}
test（）；
}
render（）{
const{props}=this；
从{this.props.compiler}和{this.props.framework}返回Hello！；
}
}

---

如果我试图以es5为目标，它会告诉我需要一个

Promise

构造函数，我试图导入

bluebird

作为

Promise

，但TS随后说是受保护的名称空间或类似的东西。

错误与

异步

/

等待

无关，而是与导入您在

ProvidePlugin

中指定的

获取

有关。不再允许这样做

使用您提供的配置，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'
}),

---

该错误与

async

/

wait

无关，而是与导入在

ProvidePlugin

中指定的

fetch

有关。不再允许这样做

使用您提供的配置，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'
}),

---

该错误来自Web包<代码>“目标”：“es2015”优于

“目标”：“es6”

，而且，您不应该设置

--outDir

，因为输出是由Webpack生成的。相反，设置

--noEmit

。至于promise，set

“lib”：[“dom”，“es2017”]

@AluanHaddad我尝试了你的设置（见编辑的帖子），我仍然无法解决同样的错误imports@AluanHaddad是的，在我向代码中添加wait/async之前，它工作得非常好，这是一个特定于网页包的错误。确保atl和typescript已更新为最新版本。也可以试试ts加载器。我刚刚创建了回购协议，所以应该可以。我将尽快尝试ts laoder，因为错误来自Web包<代码>“目标”：“es2015”优于

“目标”：“es6”

，而且，您不应该设置

--outDir

，因为输出是由Webpack生成的。相反，设置

--noEmit

。至于promise，set

“lib”：[“dom”，“es2017”]

@AluanHaddad我尝试了你的设置（见编辑的帖子），我仍然无法解决同样的错误imports@AluanHaddad是的，在我向代码中添加wait/async之前，它工作得非常好，这是一个特定于网页包的错误。确保atl和typescript已更新为最新版本。也可以试试ts加载器。我刚刚创建了回购协议，所以应该可以。我会尽快给你打电话