CODEWITHSUNDEEP
javascriptbabeljs
neowenshun
neowenshun

Reputation: 960

Getting babel to automatically transpile

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.

Is there a better way of doing this? Say making the babel auto reload on change

Here is my 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"
  }
}

My .babelrc file:

{
  "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"
      ]
    }
  }
}

Upvotes: 1

Views: 993

Answers (1)

adrianmanduc
adrianmanduc

Reputation: 886

You could use nodemon to watch the files and trigger a build or a specific script (such as build and start) whenever some changes happen.

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

Upvotes: 4

Related Questions