如何在不使用Webpack的情况下使用Babel

第133章

我正在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根据文件dist夹中的JS文件转换到其中一样,如果可用,在编辑文件时监视并转换。如何实现呢?

奥马尔姆

您可以简单地通过命令行运行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",

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何在不使用webpack的情况下使用laravel echo

如何在不使用webpack的情况下让Flask查看Vue构建文件?

如何在不使用CLI / Webpack / Node的情况下制作Vue 3.0应用程序

如何在不使用Setter的情况下使用Getter

如何在不使用make的情况下使用cgo?

如何在不使用xml的情况下使用ViewPager?

如何在不使用$ scope的情况下使用$ emit / $ on?

如何在不使用mysql的情况下使用表

如何在不使用div的情况下使iframe响应?

如何在不使用JPQL的情况下选择多行?

如何在不使用sudo的情况下输入chroot?

如何在不使用DefaultServeMux的情况下实现HandlerFunc

如何在不使用<br />的情况下从CSS换行?

如何在不使用@import的情况下减少@import?

如何在不使用循环的情况下多次打印?

如何在不使用SphereGeometry的情况下绘制Sphere?

如何在不使用xpath的情况下检查元素

如何在不使用AND的情况下从多行获取ID

如何在不使用Quartz的情况下安排任务

如何在不使用代理的情况下更改IP?

如何在不使用 NOT IN 的情况下优化 SQL 查询

如何在不使用 public 的情况下编写脚本?

如何在不使用require语句的情况下使用webpack加载目录中的所有文件

在不使用Babel的情况下转译JSX

如何在没有捆绑软件但具有类似于webpack的开发经验的情况下使用Babel?

在不使用Webpack的情况下使用Vue js组件

#homework如何在不使用add()的情况下入队,而在不使用remove()的情况下出队?

如何在不使用Azure门户的情况下获取DocumentDB磁盘使用情况

如何在不使用jQuery但使用纯Javascript的情况下使用AJAX提交此表单