Question

我正在使用electron.js制作React。我正在使用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中的JS文件将dist内的所有JSX文件转换为using System.Linq; void ShowQuestion() { RemoveAnswerButtons(); ChooseQuestion(); // random question is succsessfull QuestionData questionData = questionPool[questionIndex]; // Get the QuestionData for the current question questionText.text = questionData.questionText; // Update questionText with the correct text Random rnd=new Random(); var answersInRandomOrder = questionData.answers.OrderBy(x => rnd.Next()).ToArray(); for (int i = 0; i < answersInRandomOrder.Length; i++) // For every AnswerData in the current QuestionData... { GameObject answerButtonGameObject = answerButtonObjectPool.GetObject(); // Spawn an AnswerButton from the object pool answerButtonGameObjects.Add(answerButtonGameObject); answerButtonGameObject.transform.SetParent(answerButtonParent); answerButtonGameObject.transform.localScale = Vector3.one; AnswerButton answerButton = answerButtonGameObject.GetComponent<AnswerButton>(); answerButton.SetUp(answersInRandomOrder[i]); // Pass the AnswerData to the AnswerButton so the AnswerButton knows what text to display and whether it is the correct answer } }文件夹，如果可用，在编辑文件时观察和转换。如何实现？

Answer 1

您只需通过命令行运行babel：

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

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

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

以下是Material-UI的package.json：

中的示例

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

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

1 个答案: