Question

UPD。

我有两个文件夹的前端和共享文件夹，使用ts-loader由webpack捆绑在一起。

问题是共享文件夹中导出的接口的更改未检测到。

如果我在IThemes.ts中添加

export const x = 2

即使接口发生更改，也不会再次检测到更改。

导出的IThemes.ts示例：

export interface IGeneralTheme {
  isDay: boolean
  day: ITheme
  night: ITheme
}

接口使用ThemeContext.tsx的示例：

import React, { useState, useEffect } from 'react'
import { deepClone, ITheme, IGeneralTheme } from '@shared'
import { ThemeProvider, createGlobalStyle } from 'styled-components'

type ThemeContextProps = {
  theme: ITheme
  generalTheme: IGeneralTheme
  isDay: boolean
  setGeneralTheme: React.Dispatch<React.SetStateAction<IGeneralTheme>>
}

export const ThemeContext = React.createContext<Partial<ThemeContextProps>>({})

tsconfig.base.json：

{
  "compilerOptions": {
    "module": "commonjs",
    "moduleResolution": "node",
    "esModuleInterop": true,
    "sourceMap": true,
    "noImplicitReturns": true,
    "noUnusedLocals": true,
    "removeComments": true,
    "noImplicitThis": true,
    "alwaysStrict": true,
    "strictBindCallApply": true,
    "strictNullChecks": true,
    "strictFunctionTypes": true,
    "allowJs": true,
    "strictPropertyInitialization": true
  },
  "exclude": [
    "../../node_modules"
  ]
}

前端文件夹中的

tsconfig.json：

{
  "extends": "../configs/tsconfig.base.json",
  "include": [
    "**/*",
    "../shared/**/*"
  ],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@shared": [
        "../shared/index"
      ],
      "@frontend": [
        "index"
      ]
    },
    "jsx": "react",
    "target": "es2015"
  }
}

webpack.base.js：

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

module.exports = {
  entry: '../frontend/client.tsx',
  output: {
    path: path.resolve('../../public'),
    filename: 'react_bundle.js'
  },
  devtool: 'source-map',
  resolve: {
    extensions: ['.js', '.jsx', '.json', '.ts', '.tsx'],
    alias: {
      '@frontend': path.resolve(__dirname, '../frontend/index'),
      '@shared': path.resolve(__dirname, '../shared/index')
    }
  },
  module: {
    rules: [
      {
        test: /\.ts(x?)$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'ts-loader'
          }
        ]
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        enforce: 'pre',
        test: /\.js$/,
        loader: 'source-map-loader'
      }
    ]
  },
  plugins: [new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /ru/)]
}

webpack.dev.js：

const merge = require('webpack-merge')
const base = require('./webpack.base.js')
const webpack = require('webpack')

module.exports = merge(base, {
  mode: 'development',
  watch: true,
  plugins: [
    new webpack.DefinePlugin({
      isProd: false
    })
  ]
})

由configs文件夹中的命令运行：npx webpack --config webpack.dev.js

Answer 1

您必须启用TS编译器选项importsNotUsedAsValues，请参阅：https://github.com/TypeStrong/ts-loader/issues/1138

Answer 2

在看到自己的问题not working only for interface:

后找到了自己的问题的答案

我遇到了类似的问题。对我来说解决的是改变   仅包含从* .ts到* .d.ts的接口的文件的文件名。

显然，ts-loader仅针对以下文件生成输出：   JavaScript输出和打字稿定义文件。输出是   由webpack观察者读取，并且webpack更新（如果这些文件之一）   变化。

在您的情况下，您有不生成JavaScript输出的文件，   不是打字稿定义文件。因此不会产生任何输出   从他们那里，并且当他们改变时，webpack观察者不会注意到。

替代方法是很棒的typescript-loader，看起来不错。

Webpack和打字稿：监视导出的接口不起作用

2 个答案: