Question

我有一个CRA项目设置，它工作正常。但是我正在考虑将它弹出并用Parcel.js替换Webpack。弹射后，我该怎么办？ index.js文件夹中的src文件是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，因此请将其指向正确的文件。
删除%PUBLIC_URL%中的模板变量index.html并直接指向文件。假设您将index.html和file.ext放在src文件夹的根目录下，href="%PUBLIC_URL%/file.ext"应该成为href="./file.ext"。
CRA会自动在您的html末尾注入<script />标记，但在Parcel中您需要指定它以便知道要捆绑的内容。因此，在<script src="./index.js" />之前将</body>添加到您的正文标记文件的底部（如果您将其置于#root之上，那么它将无法正常工作）。
用Parcel替换您的CRA package.json任务：

从

"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？

1 个答案: