Question

我们在Webpack中使用带有ts-loader的TypeScript项目，对于我们现在使用的大多数事情，在绝对类型中都有类型定义（通过typings），但不是我们想要的那个立即使用：redux-auth。

起初我没有在tsconfig.json中定义module并通过

导入它

import { EmailSignInForm } from "redux-auth/bootstrap-theme"

导致Cannot find module。然后我们读到使用CommonJS表示法可能有所帮助，但它没有，因为TS不知道导入模块的成员（Property 'EmailSignInForm' does not exist on type '{}'）。使用相对路径也没有任何用处。

另外我在this article about TS 1.8中读到它现在应该支持普通的JS文件，但是没有详细解释如何。 allowJs已启用。

如何导入该模块？谢谢！

这是我们的webpack.config.js：

var webpack = require('webpack');
var fail = require('webpack-fail-plugin');

module.exports = {
  entry: './static/files/app/main.tsx',

  output: {
    path: './static/files/',
    filename: 'bundle.js',
    sourceMapFilename: '[file].map'
  },

  resolve: {
    extensions: ['', '.webpack.js', '.web.js', '.ts', '.tsx', '.js']
  },

  module: {
    loaders: [
      {
        test: /\.tsx?$/,
        loader: 'ts-loader',
      },
    ]
  },

  devtool: 'source-map',

  plugins: [
    fail,
    new webpack.ProvidePlugin({
      //Promise: 'exports?global.Promise!es6-shim',
      fetch: 'imports?this=>global!exports?global.fetch!whatwg-fetch'
    })
  ]
};

我们的tsconfig.json：

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "jsx": "react",
    "sourceMap": true,
    "allowJs": true,
    "noEmitOnError": true
  },
  "files": [
    "typings/browser.d.ts"
  ],
  "exclude": [
    "typings/main.d.ts",
    "typings/main",
    "node_modules"
  ]
}

（"module": "commonjs"是暂时的，以测试CommonJS表示法）

更新

好的，所以如果我declare var require: any并使用require()中的相对路径我可以导入它，虽然我怀疑这是预期的方式。好玩，现在我从Webpack收到这条消息：

WARNING in ./~/encoding/lib/iconv-loader.js
Critical dependencies:
9:12-34 the request of a dependency is an expression
 @ ./~/encoding/lib/iconv-loader.js 9:12-34

ERROR in ./~/iconv-lite/encodings/tables/gb18030-ranges.json
Module parse failed: ./node_modules/iconv-lite/encodings/tables/gb18030-ranges.json Line 1: Unexpected token :
You may need an appropriate loader to handle this file type.

Answer 1

# declarations.d.ts
declare module '*';

# someFile.ts
import * as $ from 'jquery';
import * as _ from 'lodash';

如果你有一个模块的类型代码完成应该工作，编译器会假设你知道你在做什么。我认为ts loader也应该尊重它。请测试并告诉我。

如何将纯JS导入TypeScript（没有打字）

1 个答案: