停止Babel编译jsx代码？

Question

大多数信息和答案都涉及babel没有编译成JSX的问题。在我的例子中，我使用.jsx作为模板引擎，所以我希望babel编译.js文件而不是.jsx文件。我仍然想将文件复制到build / dist文件夹。

我的应用结构是：

App/
├── dist/
├── styles/
│   ├── _main.scss
│   ├── _module.scss
│   └── index.scss
├── assets/
│   ├── index.css
│   └── image.jpg
├── views/
│   ├── main.jsx
│   └── component.jsx
├── server.js
├── Models.js
├── Schemas.js
└── package.json

我试过了

babel src -d dist --ignore styles,*.jsx --copy-files views --presets es2015

似乎无法识别视图文件夹

babel src -d dist --ignore styles --copy-files --presets es2015

它正确地执行了操作，但也编译了.jsx，它打破了视图。

我还考虑过删除babel-loader软件包，但不确定是否过度使用它。

我无法想到您可能需要回答的更多信息，但如果您要我放入package.json或任何其他文件，请告诉我。

更新

--ignore和--copy-files似乎存在一些混淆。有些人希望忽略覆盖副本而其他人复制覆盖忽略。在我的情况下，后者将是更可取的。

https://github.com/babel/babel/issues/5052 https://github.com/babel/babel/issues/5176

现在，如果我这样做

babel src --out-dir dist --copy-files --ignore styles,*jsx  --presets es2015

它会忽略.jsx文件，但它不会复制它们。它确实忽略了样式目录，这是正确的。它似乎无法忽视它可以传播的东西。

Answer 1

--copy-files option复制未按原样处理的文件。它不接受像--copy-files views那样的文件。

--ignore option完全忽略文件，这在这里是不受欢迎的行为。

问题是Babel处理.jsx文件，而不是它编译JSX。如果未指定react预设，Babel不会编译JSX语法，因此它被视为语法错误。发生这种情况是因为processes .jsx files by default。解决方案是使用--extensions选项覆盖默认值：

babel src -d dist --extensions .js --copy-files --presets es2015

这应该将所有.js文件从ES6转换为ES5，然后复制其他所有文件。

应该提到的是，Babel只是一个转换器，可能不是复杂文件操作任务的正确工具。这就是Grunt和Gulp等专用自动化工具的用途。