Question

以下是我在 index.tsx 文件中的导入代码。

import Clock from "./utility/clock";

这是我的tsconfig。

{
  "compilerOptions": {
      "sourceMap": true,
      "noImplicitAny": true,
      "module": "es6",
      "target": "es5",
      "jsx": "react",
      "allowSyntheticDefaultImports": true,
      "allowJs": true,
  },
  "include": [
      "./src"
  ]
}

在提出此问题之前，我已查看此页：Module Resolution

我确定，我的Clock组件文件路径是正确的，如下图所示。

我很困惑为什么找不到时钟模块。谢谢你的帮助。

======更新webpack.config.js

const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
let isDev = false;
const env = process.env.NODE_ENV;
isDev = env === "development" ? true : false;
console.log(isDev ? "开发环境" : "生产环境");
const htmlsMap = [
  {
    template: "index",
    chunks: ["index"]
  },
  {
    template: "d3",
    chunks: ["d3"]
  }
];

const htmlFiles = (function() {
  let result = [];
  htmlsMap.map((item) => {
    result.push(
      new HtmlWebpackPlugin({
        template: `./src/template/${item.template}.html`,
        chunks: item.chunks,
        filename: `${item.template}.html`
      })
    );
  });
  return result;
}());

module.exports = {
  entry: {
    // commons: ["jquery", "bootstrap"], 
    index: ["./src/template/index.js"],
    d3: ["./src/template/d3.js"]
  },
  devtool: "eval-source-map",
  output: {
    path: path.resolve("build"),
    publicPath: isDev ? "/build/" : "./",
    filename: "[name]-[hash].js"
  },
  module: {
    rules: [{
      test: /\.html$/,
      loader: "html-loader"
    }, {
      test: /\.less$/,
      loader: "style-loader!css-loader!less-loader"
    }, {
      test: /\.css$/,
      loader: "style-loader!css-loader"
    }, {
      test: /\.(eot|woff|ttf|eot|woff2)$/, loader: "file-loader"
    },{
      test: /\.js$/,
      loader: "imports-loader?define=>false"
    }, { 
      test: /\.tsx?$/,
      loader: "awesome-typescript-loader" 
    }, {
      test: /\.jsx?$/,
      exclude: /node_modules/,
      loaders: ["babel-loader"]
    }, {
      test: /.*\.(gif|png|jpe?g|svg)$/i,
      loader: "file-loader?name=img-[sha512:hash:base64:7].[ext]"
    },{
      test: /bootstrap.+\.(jsx|js)$/, loader: "imports-loader?jQuery=jquery,$=jquery,this=>window"
    }
    ]
  },
  plugins:[
    new webpack.DllReferencePlugin({
      context: __dirname,
      manifest: require("./manifest.json"),
    }),
  ].concat( htmlFiles)
    .concat(
      isDev ?
        // 开发环境
        [
          new webpack.HotModuleReplacementPlugin(),
          new webpack.NamedModulesPlugin(),
          // new BundleAnalyzerPlugin(),
        ]
        :
        // 生产环境
        [
          new webpack.optimize.UglifyJsPlugin({
            compress: {
              warnings: false
            }
          }),
          new webpack.DefinePlugin({
            "process.env": {
              NODE_ENV: JSON.stringify("production")
            }
          })
        ]
    )
};

=====更新2：clock.tsx

import React, { Component } from "react";

class Clock extends Component<any, any>{
  render() {
    return (
      <div>
        I plan to design a clock by CSS
      </div>
    )
  }
};

export default Clock;

Answer 1

在我看来，您错过了webpack配置中的resolve.extensions部分。试试这个：

import Clock from "./utility/clock.tsx";

或将其添加到您的webpack配置

resolve: {
  extensions: [/*your other extensions here*/, ".tsx"]
}

这样，您可以在导入时排除文件扩展名。另外，请务必在resolve

中的适当级别添加module.exports部分

为什么我的index.tsx找不到时钟模块？

1 个答案: