Netlify部署Parcel打包的纯JS HTML项目时，如何仅使用打包文件并隐藏原JavaScript文件？

嗨，我来帮你搞定这个问题！你现在遇到的情况是Netlify把项目里所有文件都部署了，而不是只使用Parcel生成的dist文件夹内容对吧？别着急，咱们从Parcel配置和Netlify设置两方面入手，就能完美解决这个问题。

第一步：确保Parcel正确处理你的HTML文件 #

你提到HTML文件打包后没变化，这大概率是因为Parcel没把HTML作为入口文件处理。Parcel默认会自动修改HTML里的脚本引用，把源JS路径替换成打包后的带哈希的JS文件，所以你要做这些检查：

• 执行打包命令时，要把HTML文件作为入口，比如运行 parcel build index.html（如果你的入口HTML是index.html的话），而不是单独打包JS文件。这样Parcel会完整处理HTML，自动更新里面的<script>标签指向dist里的打包文件。
• 检查HTML里的script标签路径：确保是相对路径（比如<script src="./app.js"></script>），这样Parcel才能正确识别并替换成打包后的路径。如果用了绝对路径或者错误的相对路径，Parcel可能没法处理。

第二步：配置Netlify只部署dist文件夹 #

这是解决源文件暴露问题的核心！默认Netlify会部署项目根目录下的所有文件，所以我们要明确告诉它只取dist里的内容，有两种方式：

• 方式一：用配置文件（推荐）
  在项目根目录创建一个netlify.toml文件，添加以下内容：

[build]
  publish = "dist"
  command = "parcel build index.html" # 替换成你的实际打包命令，确保能生成正确的dist文件夹

这样Netlify在构建时，会先执行打包命令生成dist，然后只把dist文件夹里的内容部署到服务器，你的源JS文件根本不会被上传，自然就不会被访问到。

• 方式二：在Netlify后台设置
  如果你不想用配置文件，也可以登录Netlify进入你的项目，依次点击：Site settings → Build & deploy → Continuous deployment下的Build settings，然后设置：
  • Build command：填写你的Parcel打包命令（比如parcel build index.html）
  • Publish directory：填写dist

第三步：额外检查点 #

• 确认.gitignore里添加了dist/：不要把dist文件夹提交到Git仓库，让Netlify在构建时自己生成最新的打包文件，避免用旧的dist内容。
• 验证dist里的HTML：打包完成后，打开dist文件夹里的HTML文件，看看<script>标签的src是不是已经变成了带哈希的JS文件名（比如app.abc123.js），如果还是指向源JS文件，说明Parcel的打包入口没设置对，回头检查第一步的内容。

这样设置完成后，Netlify只会部署dist里的打包文件，你的源JS文件完全不会出现在部署的网站上，完美解决你的问题！

备注：内容来源于stack exchange，提问作者praveen guda