使用 Parcel 以自动方式在更改后编译 React 应用程序

Question

我正在创建一个导出简单 React 组件的 TypeScript 库。我正在使用 Parcel 作为捆绑器。

这是我的 package.json:

{
  ...
  "main": "dist/index.js",
  "files": [
    "dist/"
  ],
  "scripts": {
    "compile": "rm -rf dist/ && tsc --outDir dist",
    "compile-watch": "rm -rf dist/ && tsc -w --outDir dist",
    "format": "prettier src/**/*.{js,jsx,ts,tsx} --write",
    "lint": "tslint -p tsconfig.json",
    "prepublish": "yarn compile",
    "clean": "yarn format && yarn lint",
    "start:demo": "parcel demo/index.html",
    "build": "parcel build demo/index.html --out-dir demo-build"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^4.3.0",
    "@typescript-eslint/parser": "^4.3.0",
    "eslint": "^7.10.0",
    "eslint-config-prettier": "^6.12.0",
    "parcel": "^1.12.4",
    "prettier": "^2.1.2",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "typescript": "^4.0.3"
  },
  "dependencies": {
    "@types/react": "^16.9.50",
    "@types/react-dom": "^16.9.8",
  }
}

我的文件结构：

myLibrary/
  |_ demo/
    |_ index.html
    |_ index.tsx
    |_ style.css
  |_ demo-build/
    |_ ...
  |_ dist/
    |_ ...
  |_ node_modules/
    |_ ...
  |_ src/
    |_ lib/
      |_ Test.tsx
      |_ ...
    |_ index.tsx
  |_ package.json
  |_ ...

为了测试测试组件，我创建了一个演示页面，所以我运行 yarn start:demo。

问题是当我编辑测试组件时，没有任何变化。我需要停止进程，运行 yarn compile 然后运行 yarn start:demo。我错过了什么？

Answer 1

可以在parcel中使用watch命令

https://en.parceljs.org/cli.html#watch

parcel watch demo/index.html

因为您已经有 compile-watch，所以在开发时使用 yarn compile-watch。

使用 Parcel 以自动方式在更改后编译 React 应用程序

Compile React app after changes in a automatic way using Parcel

reactjs

bundler

parceljs