reactjs - 如何在没有 Webpack 的情况下使用 Babel

Question

我正在使用 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 文件，例如将 src 中的所有 JSX 文件转换到那里根据 dist 文件夹中的 JS 文件，如果可用，在编辑文件时进行监视和转译。如何实现这一目标？

Answer 1

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

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

文档: 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

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

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