在 django-compressor 中为 React 预编译 jsx

Question

在 Windows 10（64 位）上使用 Cygwin 在 Node.js 之上安装了 babel-cli、react 和 babel-preset-react，它们是通过 Windows 安装程序安装的（因为不支持 Cygwin。）我安装了那些在全局模块文件夹中使用 yarn 的节点包。

在 django-compressor 文档 (https://django-compressor.readthedocs.io/en/latest/reactjs/) 中，他们说预编译器设置可以解决问题：

COMPRESS_PRECOMPILERS = (
   ('text/jsx', 'cat {infile} | babel > {outfile}'),
)

但是，babel 无法识别 jsx（遇到虚拟 dom 元素时会抛出错误。）这很明显，因为我没有将 react 预设传递给命令。但是我无法使用那个预设，因为我安装在全局模块文件夹中，现在我无法让 babel 找到并使用它。

我需要以下可能的解决方案之一：

如何让 babel 使用全局安装的预设（我应该如何以有效的方式使用 babel --presets react）？
如何在 Django 项目中使用 .babelrc 文件？
如果我要在本地安装预设（我似乎很不喜欢），我如何让它与我的 Django 项目一起使用而不弄乱我的项目目录结构？

Answer 1

好吧，我敲了几次头，找到了解决办法：

无法使 babel 使用全局安装的预设。必须在本地安装它们。所有 react、react-dom、babel-core、babel-loader、babel-preset-react（如果需要最新的 ECMA 语法，可能还有 babel-preset-es2015）必须在本地安装。
没有地方可以放置 .babelrc 文件供预编译器使用。 package.json 中的 babel 部分也没有用。相反，预编译器设置应该在命令行中传递预设，如：
```
COMPRESS_PRECOMPILERS = (
  ('text/jsx', 'cat {infile} | babel --presets react,es2015 > {outfile}'),
)
```
假设 manage.py 所在的文件夹也是 Nodejs 包的根目录。 wsgi 文件中的部署和运行未测试，但也许 wsgi 也应该位于 manage.py.

此外，所有这些文件和文件夹看起来都是：~~node_modules~~、package.json 和 yarn.lock（如果使用 yarn 和我一样，) 必须包含在版本控制中。

已编辑： 我不认为 node_modules 应该进入版本控制。

在 django-compressor 中为 React 预编译 jsx

Precompile jsx for React in django-compressor

django

node.js

django-compressor

reactjs

babeljs