如何在没有 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 文件转换为 [=23] 中的 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",

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

How to use Babel without Webpack

watch

transpiler

reactjs

webpack

babeljs