title: How to use Babel without Webpack
body: <p>I'm making an <code>electron.js</code> using <code>React</code>. I'm using JSX so need to use <code>Babel</code> to transpile. Many tutorials out there all suggests using Webpack. </p>
  
  <p>Currently, I'm using <code>Webpack 4</code>. Here is my <code>webpack.config.js</code></p>
  
  <pre><code>const path = require('path')
  
  module.exports = {
    entry: "./src/renderer.js",
    output: {
      path: path.resolve(__dirname, "dist"),
      filename: "renderer.js"
    },
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader'
          }
        }
      ]
    }
  }
  </code></pre>
  
  <p>And my <code>.babelrc</code></p>
  
  <pre><code>{
    "presets": ["es2015", "stage-0", "react"]
  }
  </code></pre>
  
  <p>Here I need to start with <code>renderer.js</code> because it contains most of my code and <code>React</code> components, the result is a bundled js file. </p>
  
  <p>But all I want is to transpile all my <code>jsx</code> files to normal <code>js</code> files, something like transpile all JSX files within <code>src</code> to there according JS files in <code>dist</code> folders, and if available, watch and transpile when I edit the files. How to achieve that?</p>