- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我在现有项目中添加了 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
,但为什么第一次尝试一切正常?
我可以忽略这个错误,但是 hot module replacement无法使用,因为无论如何我每次都必须手动触发新的构建过程。
我正在与:
这里是来自测试组件的脚本标签:
<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
也受到影响以及问题到底出在哪里。
关于laravel - npm run watch/hot 仅在第一次运行时成功,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/69120779/
我已经使用 flutter_web 有一段时间了,从来没有真正质疑过它在按下“热重载”时总是重新启动整个应用程序,但自从现在 flutter_web 被合并到主要的 flutter channel 我
我正在使用 webpack-dev-server处于开发模式( watch )。每次服务器重新加载时,一些 json 和 js 文件都会挤满我的构建目录,如下所示:'hash'.hot-update.
我正在尝试让 React-hot-loader 3 与 React-hot-loader 3、React-router 4 和 Webpack-hot-middleware(最新版本,2.18.2)一
我正在尝试使用 Handsontable 版本 0.34.4CE/1.14.2 PRO 在 Handsontable (HOT-in-HOT) 中创建 Handsontable。根据此处提供的文档,一
使用one-hot encoding,一旦你有一个包含 1 个值的列,让我们说“color”,pandas get_dummies 将做如下: df = pd.DataFrame({'f1': ['r
鉴于这些是我正在使用的依赖项: "react-hot-loader": "3.0.0-beta.7", "webpack": "2.6.1", "webpack-dev-middleware": "^
我在我的输出目录中建立了一系列热加载器文件 (*.hot-loader.json)。如何确保此输出目录清除不必要的文件? 注意:我也在使用 Webpack。 最佳答案 使用 webpack-middl
我是机器学习和深度学习的新手。我想解决时间序列问题,该问题每秒都有数据。另外,我最近一直在研究word2vector和时间序列数据。有一天,我想到了一个想法,将日期时间等序列数据转换为 one-hot
我正在尝试让 React Hot Reloader 适用于我的 ReactJS 项目,但收到错误错误:找不到相对于目录的预设“react-hot”... 我确实在 .babelrc 中设置了预设“re
基于网络阅读、堆栈溢出,主要是 these articles关于与编码恐怖相关的数据库版本控制,我已经尝试编写一个计划来对一个有 8 年历史的 php mysql 网站的数据库进行版本控制。 Data
我正在尝试想出一种方法来确定某些帖子在论坛中的“热门”程度。你会使用什么标准,为什么?如何将这些结合起来得出热度分数? 我考虑的标准包括: 有多少回复 距离上次回复有多久 平均回复时间 该算法必须解决
我正在尝试复制 reddit's hot algortithm用于整理我的帖子。这是我的功能: def hot(self): s = self.upvotes baseScore =
先给大家展示下效果图,看看是不是在你的意料之中哈。 labelview是在github上一个开源的标签库。其项目主页是:https://github.com/linger1216//label
我的R代码有问题,而缺少值。实际上不知道如何使用简单的Hot Deck方法估算这些值。例如,拥有这些数据。 1 10000123 111 112820 0.24457235 NA
我正在研究有关Node.js的教程,网址为:http://www.johnpapa.net/get-up-and-running-with-node-and-visual-studio/ 我可以让该应
我有一个像这样的 CSV 文件 我想选择最后一列并使每个序列的字符级单热编码矩阵,我使用此代码但它不起作用 data = pd.read_csv('database.csv', usecols=[4]
我有一个包含混合字符串的列,我创建了列来表示字符串中的每个唯一字符。我需要用 [1,0] 对列进行编码如果字符串中的任何字符与这些列之一匹配。 library(data.table) d = data
当 Jetty 上有原生 Java 代码时,您可以执行热部署。 例如,这使您可以更改 servlet 代码,而无需重新启动服务器即可查看应用程序更改。 但是,如果您在 Java 之上运行脚本语言 -
假设我想从 Reddit 子版 block “新闻”流式传输帖子。然而,帖子非常频繁,我们不能说每个帖子都值得。所以我想通过尝试流式传输“热门”列表来过滤好帖子。但我不确定这是否可能,或类似的事情是否
这是我的服务器代码: if (process.env.NODE_ENV === 'development') { // Enable logger (morgan) a
我是一名优秀的程序员,十分优秀!