如何在没有 Webpack 的情况下使用 Babel答案

【问题标题】：How to use Babel without Webpack如何在没有 Webpack 的情况下使用 Babel
【发布时间】：2018-08-21 22:44:34
【问题描述】：

我正在使用React 制作electron.js。我正在使用 JSX，所以需要使用 Babel 进行转译。许多教程都建议使用 Webpack。

目前，我正在使用Webpack 4。这是我的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'
        }
      }
    ]
  }
}

还有我的.babelrc

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

这里我需要从renderer.js开始，因为它包含了我的大部分代码和React组件，结果是一个捆绑的js文件。

但我想要的只是将我所有的jsx 文件转换为普通的js 文件，例如根据dist 文件夹中的 JS 文件将src 中的所有 JSX 文件转换到那里，如果可用，请观看和当我编辑文件时转译。如何实现？

【问题讨论】：

为什么你不希望webpack 这样做呢？我真的不明白原因:)
这就是我需要的babeljs.io/docs/usage/cli/#compile-directories

标签： reactjs webpack babeljs watch transpiler

【解决方案1】：

你可以简单地通过命令行运行 babel：

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

文档： https://babeljs.io/docs/plugins/transform-react-jsx-source/

注意页面上的三个“用法”。他们都会得到你想要的，他们都不使用webpack。 .babelrcfile 可以处理你所有的插件/转换，是推荐的用法。然后你只需运行babel

这是来自 Material-UI 的 package.json 的示例：

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

【讨论】：