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

Question

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

Answer 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> 之前（如果将其放在 #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.

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

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

How to replace webpack with parcel in a CRA project?

webpack

create-react-app

parceljs