web-dev-qa-db-ja.com

WebpackなしでBabelを使用する方法

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ファイルに従ってトランスパイルし、可能な場合は、ファイルを編集するときに監視してトランスパイルします。それを達成する方法は？

reactjswebpackbabelwatchtranspiler
6
onmyway133

コマンドラインからbabelを実行するだけです。

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

ドキュメント： https://babeljs.io/docs/plugins/transform-react-jsx-source/

このページの3つの「使用法」に注意してください。それらのすべてがあなたが望むものを手に入れます、それらのどれもwebpackを使用しません。 .babelrcfileはすべてのプラグイン/変換を処理でき、推奨される使用法です。次に、babelを実行します。

Material-UIの package.json の例を次に示します。

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