2

大多数信息和答案都涉及 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 文件，但不会复制它们。它确实忽略了样式目录，这是正确的。似乎它无法忽略它可以转换的东西。

4

1 回答 1

0

--copy-files选项复制未按原样处理的文件。它不接受他们喜欢的文件--copy-files views。

--ignore选项完全忽略文件，这是不受欢迎的行为。

问题在于 Babel 处理 .jsx 文件，而不是它编译 JSX。如果没有指定预设，Babel 不会编译 JSX 语法react，因此会被视为语法错误。这是因为它默认处理 .jsx 文件。解决方案是使用--extensions选项覆盖默认值：

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

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

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

于 2018-02-03T02:48:35.200 回答