让babel自动转换文件

Question

嘿，伙计们，我正在尝试制作一个npm模块，并将其建立在这个样板的基础上，并使用npm link使包在本地可用于测试反应web应用程序。问题是，每次我对npm模块项目进行小的更改时，我都需要执行npm run clean && npm run build和npm start来重新启动react web应用程序项目。

有更好的方法吗？说在改变时使babel自动重新加载

这是我的包.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",
...
},
}