包裹呈现 404 页面

Question

我有一个 typescript 项目，我正在从 react-script 迁移到 parcel。

但是在运行 parcel 之后，项目构建，但是 url 呈现 404 页面未找到 html...

配置文件如下：

package.json :

{
  "name": "my-project",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@blueprintjs/core": "^3.45.0",
    "@emotion/react": "^11.4.0",
    "@emotion/styled": "^11.3.0",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "@types/jest": "^26.0.15",
    "@types/node": "^16.9.3",
    "@types/react": "^17.0.0",
    "@types/react-dom": "^17.0.0",
    "@types/react-router-dom": "^5.1.7",
    "axios": "^0.21.4",
    "cross-env": "^7.0.3",
    "dotenv": "^10.0.0",
    "pullstate": "^1.22.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^5.2.0",
    "reselect": "^4.0.0",
    "spinners-react": "^1.0.4",
    "ts-loader": "^9.2.6",
    "typescript": "^4.4.3",
    "use-axios-client": "^2.0.0",
    "web-vitals": "^1.0.1"
  },
  "scripts": {
    "start": "cross-env NODE_ENV=local parcel ./src/index.tsx -p 3000",
    "build": "parcel build"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "devDependencies": {
    "@babel/core": "latest",
    "@babel/preset-env": "^7.12.7",
    "@babel/preset-typescript": "latest",
    "@parcel/transformer-inline-string": "2.0.0-rc.0",
    "@parcel/transformer-svg-react": "^2.0.0-nightly.1739",
    "@parcel/config-default": "latest",
    "css-loader": "^6.3.0",
    "file-loader": "^6.2.0",
    "parcel": "^2.0.0-rc.0",
    "prettier": "2.3.1"
  }
}

tsconfig.json :

{
  "compilerOptions": {
    "outDir": "./dist/",
    "sourceMap": true,
    "strict": true,
    "noImplicitReturns": true,
    "noImplicitAny": true,
    "module": "es6",
    "moduleResolution": "node",
    "target": "es5",
    "allowJs": true,
    "jsx": "react",
    "resolveJsonModule": true,
    "allowSyntheticDefaultImports": true
  },
  "include": [
    "./src/**/*"
  ],
  "exclude": [
    "dist",
    "node_modules"
  ],
}

.parcelrc :

{
    "extends": "@parcel/config-default",
    "transformers": {
      "bundle-text:*": ["...", "@parcel/transformer-inline-string"],
      "jsx:*.svg": ["...", "@parcel/transformer-svg-react"]
    }
}

由于我是构建工具和 parcel 的新手，我不确定我在这里做错了什么...

Answer 1

您的 start 脚本应针对您要提供的 .html 文件，而不是直接针对 .ts 文件。 Parcel 与 webpack 等打包器的工作方式有点不同，因为它可以直接解析 html 的依赖关系。

因此您的 start 脚本将如下所示：

cross-env NODE_ENV=local parcel ./src/index.html -p 3000

...您的 index.html 文件将包含这样一行：

<script type="module" src="index.tsx"></script>

见this example in the getting started docs

包裹呈现 404 页面

Parcel renders a 404 page

typescript

parceljs