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

Question

我有一个 CRA 项目设置，并且运行良好。不过我正在考虑将其弹出并用 Parcel.js 替换 Webpack。弹出后，我应该做什么？ src 文件夹中的 index.js 文件是 Parcel 所需的唯一文件吗？

Answer 1

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

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

1. 卸载 react 脚本:$ npm rm react-scripts

2. 安装parcel-bundler:$ npm i -D parcel-bundler

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

4. 删除模板变量%PUBLIC_URL%在你的index.html并直接指向文件。假设您放置 index.html和file.ext两者都在您的 src 的根部文件夹，href="%PUBLIC_URL%/file.ext"应该变成href="./file.ext" .

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

6. 更换您的 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 .

就是这样。如果我错过了什么，请告诉我。