title: Getting babel to automatically transpile
body: <p>Hey guys I'm trying to make a npm module and basing it off this <a href="https://github.com/flexdinesh/npm-module-boilerplate" rel="nofollow noreferrer">boilerplate</a> , and using <code>npm link</code> 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 <code>npm run clean &amp;&amp; npm run build</code> and <code>npm start</code> to restart the react web app project.</p>
  <p>Is there a better way of doing this? Say making the babel auto reload on change</p>
  <p>Here is my package.json:</p>
  <pre><code>{
    &quot;name&quot;: &quot;boiler-plate&quot;,
    &quot;version&quot;: &quot;0.0.3&quot;,
    &quot;description&quot;: &quot;boiler-plate&quot;,
    &quot;main&quot;: &quot;./lib/index.js&quot;,
    &quot;type&quot;: &quot;module&quot;,
    &quot;scripts&quot;: {
      &quot;clean&quot;: &quot;rimraf lib&quot;,
      &quot;test&quot;: &quot;npm run lint &amp;&amp; npm run cover&quot;,
      &quot;test:prod&quot;: &quot;cross-env BABEL_ENV=production npm run test&quot;,
      &quot;test:only&quot;: &quot;mocha --require babel-core/register --require babel-polyfill --recursive&quot;,
      &quot;test:watch&quot;: &quot;npm test -- --watch&quot;,
      &quot;test:examples&quot;: &quot;node examples/&quot;,
      &quot;cover&quot;: &quot;nyc --check-coverage npm run test:only&quot;,
      &quot;lint&quot;: &quot;eslint src test&quot;,
      &quot;build&quot;: &quot;cross-env BABEL_ENV=production babel src --out-dir lib&quot;,
      &quot;cbuild&quot;: &quot;npm run clean &amp;&amp; npm run build&quot;
    },
    &quot;files&quot;: [
      &quot;lib&quot;,
      &quot;src&quot;
    ],
    &quot;repository&quot;: {
      &quot;type&quot;: &quot;git&quot;,
      &quot;url&quot;: &quot;git+https://github.com/flexdinesh/npm-module-boilerplate.git&quot;
    },
    &quot;keywords&quot;: [
      &quot;boilerplate&quot;
    ],
    &quot;author&quot;: &quot;John Doe&quot;,
    &quot;bugs&quot;: {
      &quot;url&quot;: &quot;www.google.com&quot;
    },
    &quot;homepage&quot;: &quot;www.google.com&quot;,
    &quot;devDependencies&quot;: {
      &quot;@babel/cli&quot;: &quot;^7.12.10&quot;,
      &quot;@babel/core&quot;: &quot;^7.12.10&quot;,
      &quot;@babel/preset-react&quot;: &quot;^7.12.10&quot;,
      &quot;@babel/plugin-proposal-class-properties&quot;: &quot;^7.12.1&quot;,
      &quot;@babel/preset-env&quot;: &quot;^7.12.11&quot;,
      &quot;babel-eslint&quot;: &quot;^10.0.1&quot;,
      &quot;babel-polyfill&quot;: &quot;^6.26.0&quot;,
      &quot;chai&quot;: &quot;^4.1.2&quot;,
      &quot;cross-env&quot;: &quot;^5.1.3&quot;,
      &quot;eslint&quot;: &quot;^5.16.0&quot;,
      &quot;eslint-config-airbnb&quot;: &quot;^17.1.0&quot;,
      &quot;eslint-plugin-import&quot;: &quot;^2.7.0&quot;,
      &quot;eslint-plugin-jsx-a11y&quot;: &quot;^6.0.2&quot;,
      &quot;eslint-plugin-react&quot;: &quot;^7.4.0&quot;,
      &quot;mocha&quot;: &quot;^6.1.3&quot;,
      &quot;nyc&quot;: &quot;^13.3.0&quot;,
      &quot;rimraf&quot;: &quot;^2.6.2&quot;
    },
    &quot;dependencies&quot;: {
      &quot;babel-preset-minify&quot;: &quot;^0.5.1&quot;,
      &quot;materialize-css&quot;: &quot;^1.0.0-rc.2&quot;
    }
  }
  </code></pre>
  <p>My .babelrc file:</p>
  <pre><code>{
    &quot;env&quot;: {
      &quot;development&quot;: {
        &quot;presets&quot;: [
          &quot;@babel/env&quot;
        ],
        &quot;plugins&quot;: [
          &quot;@babel/plugin-proposal-class-properties&quot;
        ]
      },
      &quot;production&quot;: {
        &quot;presets&quot;: [
          &quot;@babel/preset-react&quot;,
          &quot;@babel/env&quot;,
          [
            &quot;minify&quot;, {
              &quot;builtIns&quot;: false
            }
          ]
        ],
        &quot;plugins&quot;: [
          &quot;@babel/plugin-proposal-class-properties&quot;
        ]
      }
    }
  }
  </code></pre>