Как использовать Babel без Webpack

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 файлы, что-то вроде переноса всех файлов JSX внутри src там в соответствии с файлами JS в dist папки, и, если доступно, смотреть и переносить, когда я редактирую файлы. Как этого добиться?

Answer 1

Вы можете просто запустить babel через командную строку:

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

Документы: https://babeljs.io/docs/plugins/transform-react-jsx-source/

Обратите внимание на три "использования" на странице. Все они получат то, что вы хотите, никто из них не использует webpack, .babelrcФайл может обрабатывать все ваши плагины / преобразования и является рекомендуемым использованием. Тогда ты просто бежишь babel

Вот пример из package.json для Material-UI:

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