15

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

4

1 回答 1

34

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

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

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

  2. 安装包裹捆绑器：$ 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<script />会自动将标签注入到您的 html 末尾，但在 Parcel 中您需要指定它，以便它知道要捆绑什么。所以添加<script src="./index.js" />到你的身体标签文件的底部</body>，就在之前（如果你把它放在你的上面，#root它就行不通了）。

  6. package.json用 Parcel替换您的 CRA任务：

更改您的脚本

"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。您的startandbuild命令都会将文件输出到您的dist文件夹，这就是为什么在构建之前删除它是个好主意。此外，将.cache和添加/dist到您的.gitignore.

而已。如果我错过了什么，请告诉我。

于 2018-04-02T04:52:53.873 回答