laravel - npm run watch/hot 仅在第一次运行时成功
问题描述
背景:
我在现有项目中添加了 TypeScript 支持,因此我添加了ts-loader
和typescript
. 我认为,我正确配置了所有内容,并且在dev
和prod
模式下运行良好。
我想逐步更新,保留所有 JavaScript 代码并在所有新的或需要重构的地方使用 TypeScript。所以重要的是要注意这TableValue.vue
是一个旧的 js 组件。
问题:
编辑:它也发生在npm run watch
当我运行npm run hot
时package.json
:"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
,但为什么第一次尝试一切正常?
我可以忽略这个错误,但是热模块更换是不可用的,因为无论如何我每次都必须手动触发一个新的构建过程。
- 有人有这样的设置吗?
- 我能做些什么来解决这个错误?
信息:
我正在与:
- Laravel 8.58
- Laravel 混合 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;
}
看起来这个文件只被读取/应用一次而不是之后?没有把握。
解决方案
看起来ts-loader
还不支持HMR。
我安装了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
也会受到影响以及问题到底出在哪里。
推荐阅读
- scala - akkaHttp http请求抛出UnexpectedConnectionClosureException:http服务器关闭了连接
- javascript - 如何通过 HTML 代码中的 if 条件触发 javascript 弹出框?
- python - 请求失败,因为缺少“default_body”
- angular - 在 ionic 5 中触发离子选择组件上的更改事件
- java - google-service/firebase vs gradle 或 java 上的 Cordova 构建错误
- android - 用卡片实现 SearchView 到 RecyclerView,需要帮助排错
- python - ValueError:在实现 DecisionTreeClassifier 时无法将字符串转换为浮点数
- windows - 如何在 Windows Docker 容器中挂载 NFS 文件共享
- r - 如何制作过滤器以排除 R 系统中数据框中的重复数据?
- php - 在 PHP 中,将 bcmath 函数的结果保留为字符串还是将结果转换回浮点数更好?