npm run watch/hot 仅在第一次运行时成功

Posted 2023-02-16

【中文标题】npm run watch/hot 仅在第一次运行时成功

【英文标题】：npm run watch/hot only successful on the first run

【发布时间】：2021-11-06 06:33:01

【问题描述】：

背景：

我在现有项目中添加了 TypeScript 支持，因此我添加了 ts-loader 和 typescript。我想，我已经正确配置了一切，并且在 dev 和 prod 模式下运行良好。

我想逐步更新，保留所有 javascript 代码并在所有新的或需要重构的地方使用 TypeScript。所以注意TableValue.vue 是一个旧的js组件可能很重要。

问题：

编辑：它也发生在npm run watch

当我在package.json 中运行npm run hot 时："scripts": ..., "hot": "mix watch --hot", ... 它只在第一次尝试时有效。只要我更改任何文件并触发重新编译，我就会得到：

√ Mix: Compiled successfully in 19.15s
webpack compiled successfully

// Here the recompile is triggered
i Compiling Mix
√ Mix: Compiled with some errors in 509.01ms
ERROR in C:\fakepath\resources\js\components\test\component.vue.ts
24:23-41
[tsl] ERROR in C:\fakepath\resources\js\components\test\component.vue.ts(24,24)
      TS2307: Cannot find module './TableValue.vue' or its corresponding type declarations.

webpack compiled with 1 error

我怀疑这个错误来自ts-loader，但为什么第一次尝试一切正常？

我可以忽略这个错误，但是hot module replacement 无法使用，因为无论如何我每次都必须手动触发新的构建过程。

有人搞过这样的设置吗？ 如何解决此错误？

---

信息：

我正在合作：

Laravel 8.58 Laravel Mix 6.0.25 Vue 2.6.14 ts-loader 9.2.5 打字稿 4.4.2

这里是来自测试组件的脚本标签：

<script lang="ts">
import Vue,  PropType  from 'vue';

import TableValue from "./TableValue.vue";
import Model from "@/js/types/model.js";

export default Vue.extend(
  name: "TestComponent",
  components: 
    TableValue
  ,
  props: 
    'model': 
      type: Object as PropType<Model>,
      required: true
    
  ,
  data() 
    return ;
  ,
);
</script>

项目结构：

app/
bootstrap/
config/
database/
node_modules/
public/
resources/
  js/
    components/
    store/
    types/
    views/
    app.js
    bootstrap.js
    routes.js
    shims-vue.d.ts
  lang/
  sass/
  views/
routes/
storage/
tests/
vendor/
composer.json
composer.lock
tsconfig.json
package-lock.json
package.json
phpunit.xml
vs.code-workspace
webpack.mix.js

webpack.mix.js:

const mix = require('laravel-mix');
const ResolveTypeScriptPlugin = require("resolve-typescript-plugin").default;

mix.webpackConfig(
    module: 
        rules: [
            
                test: /\.tsx?$/,
                loader: "ts-loader",
                options:  appendTsSuffixTo: [/\.vue$/] ,
                exclude: /node_modules/
            
        ]
    ,
    resolve: 
        extensions: ['.js', '.ts', '.vue'],
        alias: 
            '@': __dirname + '/resources'
        ,
        fullySpecified: false,
        plugins: [new ResolveTypeScriptPlugin()]
    ,
    devtool: 'source-map'
).sourceMaps();

mix.ts('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.sass', 'public/css').sourceMaps()
    .vue();

mix.extract();

tsconfig.json:

    "compilerOptions": 
        "target": "esnext",
        "module": "esnext",
        "strict": true,
        "noImplicitAny": false,
        "importHelpers": true,
        "moduleResolution": "node",
        "esModuleInterop": true,
        "allowSyntheticDefaultImports": true,
        "allowJs": true,
        "checkJs": false,
        "sourceMap": true,
        "baseUrl": ".",
        "paths": 
            "@/*": [
                "resources/*"
            ]
        ,
        "lib": [
            "esnext",
            "dom",
            "dom.iterable",
            "scripthost"
        ]
    ,
    "files": [
        "resources/js/shims-vue.d.ts"
    ],
    "include": [
        "resources/js/**/*.ts",
        "resources/js/**/*.vue",
    ],
    "exclude": [
        "node_modules",
        ".vscode",
        "app",
        "bootstrap",
        "config",
        "database",
        "public",
        "routes",
        "storage",
        "tests",
        "vendor"
    ]

更新：

当我删除 shims-vue.d.ts 时，我会立即收到错误消息。

declare module "*.vue" 
    import Vue from "vue";
    export default Vue;

看起来这个文件只被读取/应用一次而不是之后？不确定。

【问题讨论】：

这只是hot还是watch？

watch 也存在问题。它在第一次尝试时有效，但一旦我更改任何文件，我就会得到同样的错误。

【参考方案1】：

在将 typescript 添加到 Inertia / Vue 3 项目后，我使用 laravel-mix 遇到了这个问题。

使用 Volar（不是 Vuter）

为了解决这个问题，我更改了我的 webpack.config.js 文件：

const path = require('path');

module.exports = 
    resolve: 
        alias: 
            '@': path.resolve('resources/js'),
        ,
    ,
;

到：

const path = require('path');

module.exports = 
    module: 
        rules: [
            
                test: /\.tsx?$/,
                loader: "ts-loader",
                options: 
                    appendTsSuffixTo: [/\.vue$/],
                    transpileOnly: true
                ,
                exclude: /node_modules/
            
        ]
    ,
    resolve: 
        extensions: ['.js', '.ts', '.tsx', '.vue'],
        alias: 
            '@': path.resolve(__dirname + '/resources/js'),
        ,
    ,
;

【参考方案2】：

我没有使用 Typescript，但同样的事情发生在我身上，当我运行 npm run watch/hot 时，只有在第一次更改代码时成功，然后，在运行 npm run watch/hot 之前你看不到更改或npm run dev 再次。奇怪的是，我所做的每一次更改都成功编译。

我设法用 git 调试它，发现我正在导入一个名称错误的组件，但在控制台上没有出现错误。 我的组件名称是WhosApplying.vue

我明白了：

import WhosApplying from "@/whosApplying.vue"

并将其更改为：

import WhosApplying from "@/WhosApplying.vue";

w 而不是W 中的那个错误让我浪费了几个小时。 ?

【参考方案3】：

看起来ts-loader 还不支持HMR。

https://github.com/TypeStrong/ts-loader#hot-module-replacement

我安装了fork-ts-checker-webpack-plugin 并将webpack.mix.js 更新为：

const mix = require('laravel-mix');
const path = require('path');

const ResolveTypeScriptPlugin = require("resolve-typescript-plugin").default;
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');

mix.webpackConfig(
    module: 
        rules: [
            
                test: /\.tsx?$/,
                loader: "ts-loader",
                options: 
                    appendTsSuffixTo: [/\.vue$/],
                    transpileOnly: true
                ,
                exclude: /node_modules/
            
        ]
    ,
    resolve: 
        extensions: ['.js', '.ts', '.tsx', '.vue'],
        alias: 
            '@': path.resolve(__dirname + '/resources'),
            '@store': path.resolve(__dirname + '/resources/js/store'),
            '@components': path.resolve(__dirname + '/resources/js/components')
        ,
        fullySpecified: false,
        plugins: [new ResolveTypeScriptPlugin()]
    ,
    plugins: [new ForkTsCheckerWebpackPlugin()],
    devtool: 'source-map'
).sourceMaps();

mix.ts('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.sass', 'public/css').sourceMaps()
    .vue();

mix.extract();

现在一切正常，但我仍然不确定为什么watch 也会受到影响以及问题出在哪里。

【讨论】：

对我来说，即使在配置 ForkTsCheckerWebpackPlugin 之后问题也没有解决，我的问题是在我的 .d.ts 文件中我声明了像这样的全局变量declare const DOTNET_API_ENDPOINT: string; typescript 首先没有给出任何错误运行，但是如果我通过更改组件中的某些内容来触发热刷新，则会显示 TS2304：找不到名称“DOTNET_API_ENDPOINT”。更新中。