How to use Babel without Webpack

Question

I'm making an electron.js using React. I'm using JSX so need to use Babel to transpile. Many tutorials out there all suggests using Webpack.

Currently, I'm using Webpack 4. Here is my webpack.config.js

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'
        }
      }
    ]
  }
}

And my .babelrc

{
  "presets": ["es2015", "stage-0", "react"]
}

Here I need to start with renderer.js because it contains most of my code and React components, the result is a bundled js file.

But all I want is to transpile all my jsx files to normal js files, something like transpile all JSX files within src to there according JS files in dist folders, and if available, watch and transpile when I edit the files. How to achieve that?

Answer 1

You can simply run babel through the command line:

babel --plugins transform-react-jsx-source script.js

Docs: https://babeljs.io/docs/plugins/transform-react-jsx-source/

Note the three "Usages" on the page. All of them will get you what you want, none of them use webpack. The .babelrcfile can handle all your plugins/transforms and is the recommended usage. Then you just run babel

Here is an example from Material-UI's package.json:

"build:es2015": "cross-env NODE_ENV=production babel ./src --ignore *.spec.js --out-dir ./build",