Preact.js - 如何像 React.js 一样启动自动重新运行服务器

Question

我想使用开发服务器，就像 React 使用 npm start 一样。但是，使用 Preact 时，当我使用相同的命令时，它会打开一个静态服务器，并且每次我想在项目中看到一些变化时都必须手动重新启动它。

我的package.json：

{
  "name": "yagoazedias-site",
  "version": "0.0.0",
  "description": "Ready-to-go Preact starter project powered by webpack.",
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --inline --hot --progress",
    "start": "serve build -s -c 1",
    "prestart": "npm run build",
    "build": "cross-env NODE_ENV=production webpack --progress",
    "prebuild": "mkdirp build && ncp src/assets build/assets",
    "test": "npm run -s lint && jest --coverage",
    "test:watch": "npm run -s test -- --watch",
    "lint": "eslint src test"
  },
  "keywords": [
    "preact",
    "boilerplate",
    "webpack"
  ],
  "license": "MIT",
  "author": "Jason Miller <jason@developit.ca>",
  "jest": {
    "setupFiles": [
      "./test/setup.js"
    ],
    "testURL": "http://localhost:8080",
    "moduleFileExtensions": [
      "js",
      "jsx"
    ],
    "moduleDirectories": [
      "node_modules"
    ],
    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
      "\\.(css|less)$": "identity-obj-proxy",
      "^react$": "preact-compat",
      "^react-dom$": "preact-compat"
    },
    "collectCoverageFrom": [
      "src/**/*.{js,jsx}"
    ]
  },
  "devDependencies": {
    "autoprefixer": "^7.0.1",
    "babel": "^6.5.2",
    "babel-core": "^6.24.0",
    "babel-eslint": "^7.2.2",
    "babel-jest": "^20.0.0",
    "babel-loader": "^7.0.0",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-plugin-transform-react-jsx": "^6.8.0",
    "babel-preset-es2015": "^6.24.0",
    "babel-preset-stage-0": "^6.5.0",
    "babel-register": "^6.24.0",
    "babel-runtime": "^6.11.6",
    "chai": "^4.0.2",
    "copy-webpack-plugin": "^4.0.1",
    "core-js": "^2.4.1",
    "cross-env": "^5.0.1",
    "css-loader": "^0.28.0",
    "eslint": "^4.1.0",
    "eslint-plugin-jest": "^20.0.0",
    "eslint-plugin-react": "^7.0.0",
    "extract-text-webpack-plugin": "^3.0.0",
    "file-loader": "^0.11.1",
    "html-webpack-plugin": "^2.28.0",
    "identity-obj-proxy": "^3.0.0",
    "jest": "^20.0.0",
    "json-loader": "^0.5.4",
    "less": "^2.7.1",
    "less-loader": "^4.0.3",
    "mkdirp": "^0.5.1",
    "ncp": "^2.0.0",
    "offline-plugin": "^4.7.0",
    "postcss-loader": "^2.0.3",
    "preact-jsx-chai": "^2.2.1",
    "raw-loader": "^0.5.1",
    "regenerator-runtime": "^0.10.3",
    "replace-bundle-webpack-plugin": "^1.0.0",
    "script-ext-html-webpack-plugin": "^1.3.4",
    "sinon": "^2.1.0",
    "sinon-chai": "^2.9.0",
    "source-map-loader": "^0.2.1",
    "style-loader": "^0.18.1",
    "url-loader": "^0.6.1",
    "webpack": "^3.0.0",
    "webpack-dev-server": "^2.4.4"
  },
  "dependencies": {
    "preact": "^8.1.0",
    "preact-compat": "^3.15.0",
    "preact-render-to-string": "^3.6.0",
    "preact-router": "^2.5.1",
    "promise-polyfill": "^6.0.2",
    "proptypes": "^1.0.0",
    "serve": "^6.0.0"
  },
  "main": "webpack.config.babel.js",
  "directories": {
    "test": "test"
  }
}

相关链接：

https://preactjs.com/ https://github.com/developit/preact

Answer 1

改用dev 脚本？

$ npm run dev

您的start 脚本正在执行serve build -s -c 1。 React CRA 的 start 脚本将启动一个 webpack 开发服务器，这就是你的 dev 脚​​本正在做的事情。

npm start 是 npm run start 的缩写。 npm run <command> 只是一个小型代理，用于查找您在 package.json 中列出的不同命令。

阅读更多关于 npm 脚本的信息here。