文章/答案/技术大牛

发布

社区首页 >问答首页 >预告:有时在重新加载时为空白页

问预告:有时在重新加载时为空白页
EN

Stack Overflow用户

提问于 2018-12-13 09:15:37

回答 1查看 371关注 0票数 0

我对Preact非常陌生& TypeScript并使用parcel-preact-typescript-boilerplate引导应用程序。

到目前为止，一切都很好，但我意识到，在重新加载时，我有时会得到一个空白页。在打开页面时，也会不时发生这种情况。所谓空白页，我的意思是我的Hello组件不会在document.body中呈现。然而，当我在Google中禁用缓存时，这种情况不会发生，在Firefox中禁用缓存时仍然会发生这种情况。

我认为原因可能是我的代码更改和介绍，但在克隆parcel-preact-typescript-boilerplate和刚开始使用npm run start时，我最终还是会有同样的奇怪行为。

这是什么原因？

index.html:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <title>PARCEL-PREACT-TYPESCRIPT-BOILERPLATE</title>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link async rel="stylesheet" href="./src/style.css" />
        <script async src="./src/index.tsx"></script>
    </head>
    <body>
    </body>
</html>

index.tsx:

import { h, render } from 'preact';

const Hello = () => (<div><h1 className="hello" >Hello World</h1></div>);

render(<Hello/>, document.body);

package.json:

{
  "name": "parcel-preact-typescript-boilerplate",
  "version": "1.0.6",
  "description": "simple parcel preact typescript project without preact-compat",
  "main": "index.html",
  "scripts": {
    "start": "parcel index.html",
    "watch": "parcel watch index.html",
    "build": "parcel build index.html",
    "rebuild": "npm run clean && npm run build",
    "clean": "rimraf dist/ && rimraf .cache"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/benevolarX/parcel-preact-typescript-boilerplate.git"
  },
  "keywords": [
    "parcel",
    "preact",
    "typescript",
    "boilerplate",
    "project"
  ],
  "author": "benevolar",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/benevolarX/parcel-preact-typescript-boilerplate/issues"
  },
  "homepage": "https://github.com/benevolarX/parcel-preact-typescript-boilerplate#readme",
  "devDependencies": {
    "@babel/core": "^7.2.0",
    "@types/node": "^10.12.12",
    "babel-preset-preact": "^1.1.0",
    "parcel-bundler": "^1.10.3",
    "rimraf": "^2.6.2",
    "typescript": "^3.2.2"
  },
  "dependencies": {
    "preact": "^8.4.2",
    "preact-compat": "^3.18.4"
  }
}

tsconfig.json:

{
    "compilerOptions": {
        "allowSyntheticDefaultImports": true,
        "baseUrl": ".",
        "checkJs": true,
        "esModuleInterop": true,
        "experimentalDecorators": true,
        "jsx": "react",
        "jsxFactory": "h",
        "module": "commonjs",
        "outDir": "dist",
        "paths": {
            "~*": ["./src/*"]
        },
        "pretty": true,
        "removeComments": true,
        "strict": true,
        "target": "esnext",
    },
    "include": [
        "src/**/*"
    ],
    "parcelTsPluginOptions": {
        "transpileOnly": false
    }
}

编辑:在玩了一会儿之后，我意识到这个问题并不是在用包构建所有东西并通过preact serve dist/preact watch dist/index.html而不是parcel index.html启动应用程序之后发生的。

typescript

preact

parceljs

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-12-18 16:15:29

您正在(或包)尝试加载类型记录(TSX)文件，浏览器不会喜欢该文件。变化

<script async src="./src/index.tsx"></script>

至

<script async src="./[build folder]/index.js"></script>

而且它应该能工作。我相信place把构建好的脚本放在一个名为build的文件夹中，所以把它放在上面的片段中代替[build folder]。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/53758452

复制

相似问题

问预告:有时在重新加载时为空白页
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问预告:有时在重新加载时为空白页EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问预告:有时在重新加载时为空白页
EN