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

如何解决使用Parcel以自动方式更改后编译React应用

我正在创建一个TypeScript库，该库导出一个简单的React组件。我正在使用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。我想念的是什么？

解决方法

您可以在包裹中使用watch命令

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

parcel watch demo/index.html

由于您已经拥有compile-watch，因此在开发时请使用yarn compile-watch。