如何在CRA项目中用包裹替换webpack?

Question

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

Answer 1

如果你不弹出，你的生活会更轻松(要删除的文件更少)。您也不需要 webpack，包裹将是您的捆绑器。

如果您的设置仍然接近CRA为您提供的开箱即用，那么您需要做的就是：

1. 卸载反应脚本：$ npm rm react-scripts

2. 安装包裹捆绑器：$ npm i -D parcel-bundler

CRA

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

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

5. CRA会自动在html的末尾注入一个<script />标签，但在包裹中，您需要指定它，以便它知道要捆绑什么。因此，在</body>之前将<script src="./index.js" />添加到正文标签文件的底部(如果您将其放在#root上方，它将不起作用)。

6. 将您的CRApackage.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。

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