讓 babel 自動轉譯

Question

Hey guys I'm trying to make a npm module and basing it off this boilerplate , and using npm link to make the package locally available to the test react web app. The problem is that everytime i make a small change to the npm module project, I need to do a npm run clean && npm run build and npm start to restart the react web app project.

有沒有更好的方法來做到這一點？ 說讓 babel 在更改時自動重新加載

這是我的 package.json：

{
  "name": "boiler-plate",
  "version": "0.0.3",
  "description": "boiler-plate",
  "main": "./lib/index.js",
  "type": "module",
  "scripts": {
    "clean": "rimraf lib",
    "test": "npm run lint && npm run cover",
    "test:prod": "cross-env BABEL_ENV=production npm run test",
    "test:only": "mocha --require babel-core/register --require babel-polyfill --recursive",
    "test:watch": "npm test -- --watch",
    "test:examples": "node examples/",
    "cover": "nyc --check-coverage npm run test:only",
    "lint": "eslint src test",
    "build": "cross-env BABEL_ENV=production babel src --out-dir lib",
    "cbuild": "npm run clean && npm run build"
  },
  "files": [
    "lib",
    "src"
  ],
  "repository": {
    "type": "git",
    "url": "git+https://github.com/flexdinesh/npm-module-boilerplate.git"
  },
  "keywords": [
    "boilerplate"
  ],
  "author": "John Doe",
  "bugs": {
    "url": "www.google.com"
  },
  "homepage": "www.google.com",
  "devDependencies": {
    "@babel/cli": "^7.12.10",
    "@babel/core": "^7.12.10",
    "@babel/preset-react": "^7.12.10",
    "@babel/plugin-proposal-class-properties": "^7.12.1",
    "@babel/preset-env": "^7.12.11",
    "babel-eslint": "^10.0.1",
    "babel-polyfill": "^6.26.0",
    "chai": "^4.1.2",
    "cross-env": "^5.1.3",
    "eslint": "^5.16.0",
    "eslint-config-airbnb": "^17.1.0",
    "eslint-plugin-import": "^2.7.0",
    "eslint-plugin-jsx-a11y": "^6.0.2",
    "eslint-plugin-react": "^7.4.0",
    "mocha": "^6.1.3",
    "nyc": "^13.3.0",
    "rimraf": "^2.6.2"
  },
  "dependencies": {
    "babel-preset-minify": "^0.5.1",
    "materialize-css": "^1.0.0-rc.2"
  }
}

我的.babelrc 文件：

{
  "env": {
    "development": {
      "presets": [
        "@babel/env"
      ],
      "plugins": [
        "@babel/plugin-proposal-class-properties"
      ]
    },
    "production": {
      "presets": [
        "@babel/preset-react",
        "@babel/env",
        [
          "minify", {
            "builtIns": false
          }
        ]
      ],
      "plugins": [
        "@babel/plugin-proposal-class-properties"
      ]
    }
  }
}

Answer 1

您可以使用nodemon監視文件並在發生某些更改時觸發構建或特定腳本（例如構建和啟動）。

{
  "scripts": {
    ...
    "start:watch": "nodemon --watch src --exec npm run build",
    ...
  },
}