如何在 CRA 项目中用 parcel 替换 webpack？

Posted 2023-02-23

【中文标题】如何在 CRA 项目中用 parcel 替换 webpack？

【英文标题】：How to replace webpack with parcel in a CRA project?

【发布时间】：2018-06-17 13:27:05

【问题描述】：

我有一个 CRA 项目设置，它运行良好。但是我正在考虑将其弹出并用 Parcel.js 替换 Webpack。弹出后，我该怎么办？ src 文件夹中的 index.js 文件是包裹我需要的唯一文件吗？

【参考方案1】：

如果您不弹出（要删除的文件更少），您的生活会更轻松。您也不需要 webpack，Parcel 将成为您的打包工具。

如果您的设置仍然接近 CRA 为您提供的开箱即用的设置，那么您只需执行以下操作：

卸载 react-scripts：$ npm rm react-scripts

安装 parcel-bundler：$ npm i -D parcel-bundler

CRA 和 Parcel 之间的主要区别在于，在 CRA 中，您的输入始终是您的src/index.js，而public/index.html 更像是一个模板。在 Parcel 中，您可以将任何 .js 文件作为条目，也可以将任何 .html 文件作为条目，这太棒了。因此，将所有文件从public 移动到src 目录，您可以继续删除public 文件夹，因为现在所有内容都是源文件。由于您的新条目是index.html，因此让它正确指向文件。

删除index.html 中的模板变量%PUBLIC_URL% 并直接指向文件。假设您将index.html 和file.ext 都放在src 文件夹的根目录下，href="%PUBLIC_URL%/file.ext" 应该变成href="./file.ext"。

CRA 会自动将<script /> 标记注入到您的 html 末尾，但在 Parcel 中您需要指定它，以便它知道要捆绑什么。因此，将<script src="./index.js" /> 添加到你的body 标签文件的底部，就在</body> 之前（如果你把它放在你的#root 上面，它就不起作用了）。

将您的 CRA package.json 任务替换为 Parcel 的：

从

更改您的脚本

"scripts": 
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test --env=jsdom",
  "eject": "react-scripts eject"

到

"scripts": 
  "start": "parcel src/index.html",
  "prebuild": "rm -rf dist/",
  "build": "parcel build src/index.html"

包裹没有eject，也没有test。您的start 和build 命令都会将文件输出到您的dist 文件夹，这就是为什么在构建之前删除它是个好主意。另外，将.cache 和/dist 添加到您的.gitignore。

就是这样。如果我遗漏了什么，请告诉我。

【讨论】：

我还必须添加一个带有 "presets": ["react-app"] 的 .babelrc 文件并安装预设： npm install --save-dev babel-preset-react-app