[英]How to use Babel without Webpack
I'm making an electron.js
using React
.我正在使用
React
制作一个electron.js
。 I'm using JSX so need to use Babel
to transpile.我正在使用 JSX,因此需要使用
Babel
进行转译。 Many tutorials out there all suggests using Webpack.许多教程都建议使用 Webpack。
Currently, I'm using Webpack 4
.目前,我正在使用
Webpack 4
。 Here is my webpack.config.js
这是我的
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'
}
}
]
}
}
And my .babelrc
还有我的
.babelrc
{
"presets": ["es2015", "stage-0", "react"]
}
Here I need to start with renderer.js
because it contains most of my code and React
components, the result is a bundled js file.这里我需要从
renderer.js
开始,因为它包含了我的大部分代码和React
组件,结果是一个捆绑的 js 文件。
But all I want is to transpile all my jsx
files to normal js
files, something like transpile all JSX files within src
to there according JS files in dist
folders, and if available, watch and transpile when I edit the files.但我想要的只是将我所有的
jsx
文件转换为普通的js
文件,比如根据dist
文件夹中的 JS 文件将src
所有 JSX 文件转换到那里,如果可用,在我编辑文件时观察和转换。 How to achieve that?如何做到这一点?
You can simply run babel through the command line:你可以简单地通过命令行运行 babel:
babel --plugins transform-react-jsx-source script.js
Docs: https://babeljs.io/docs/plugins/transform-react-jsx-source/文档: 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
.所有这些都会让你得到你想要的,他们都没有使用
webpack
。 The.babelrc
file can handle all your plugins/transforms and is the recommended usage..babelrc
文件可以处理所有插件/转换,是推荐的用法。 Then you just runbabel
然后你只需运行
babel
Here is an example from Material-UI's package.json :这是 Material-UI 的package.json 中的一个示例:
"build:es2015": "cross-env NODE_ENV=production babel ./src --ignore *.spec.js --out-dir ./build",
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.