让 babel 自动转译

Question

嘿伙计们，我正在尝试制作一个 npm 模块并将其基于此 boilerplate ，并使用 npm link 使包在本地可用于测试反应网络应用程序。问题是每次我对 npm 模块项目做一个小改动，我需要做一个 npm run clean && npm run build 和 npm start 来重新启动 react web 应用程序项目。

有更好的方法吗？假设让 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",
    ...
  },
}

让 babel 自动转译

Getting babel to automatically transpile

javascript

babeljs