如何将包含 npm 下载包的网站部署到 surge / gh-pages？

Question

我对其中包含 npm 包的网站的部署部分还很陌生。我正在尝试将我的网站临时托管到 surge.sh 以便共享和测试它。这是一个简单的 html 网站，其中包含 paper.js 脚本。只需在 chrome 中启动 index.html 即可。部署到 surge 时出现此错误：

Failed to load resource: the server responded with a status of 404 (Not Found)
Uncaught ReferenceError: paper is not defined
at HTMLDocument.<anonymous> (leaf_generator.js:2)

在部署带有节点包的站点时（在我的例子中 paper.js），我是否必须执行额外的操作？例如。首先构建网站，比如 React 应用程序？还是我在脚本中使用 paper.js 的方式有问题？

这是我的一些代码：

// package.json
{
  "name": "leaf_generator",
  "version": "1.0.0",
  "description": "testing paperjs",
  "main": "index.html",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "mark tension",
  "license": "ISC",
  "dependencies": {
    "focus-visible": "^4.1.5",
    "mathjs": "^6.0.2",
    "p5": "^0.8.0",
    "paper": "^0.12.1",
    "underscore": "^1.9.1"
  },
  "devDependencies": {
    "gh-pages": "^2.0.1"
  }
}

从 index.html 我导入 paper.js 和我的 paper.js 脚本如下：

  <script type="text/javascript" src="node_modules/paper/dist/paper-full.js"></script>
  <script type="text/javascript" src="js/leaf_generator.js"></script>

这些是引发错误的 .js 文件脚本的第一行：

$(document).ready(function() {
  paper.setup("myCanvas");
  with (paper) {
  """"""""" paper.js code """"""""""""
}

谢谢！

Answer 1

快速回答是 Surge.sh ignores the node_modules directory by default。如果 node_modules 在您的 .gitignore 文件中（可能应该是），它们也不会在 GitHub 页面上可用。没错，构建工具或静态站点生成器通常会将所有依赖项打包到构建文件中。

根据评论，您可以选择几个快速解决问题的方法：

选项 1：现在为您的 npm 依赖项使用 unpkg 服务

一个选择是使用 Unpackage 之类的东西，它会直接从 npm:

为您提供 pre-built 和托管版本的依赖项

<script type="text/javascript" src="https://unpkg.com/paper@0.12.3/dist/paper-full.js"></script>

我更喜欢 link 到特定版本，但您也可以选择始终使用 npm 的最新版本，方法是 linking 到 https://unpkg.com/paper

选项 2：Un-ignoreSurge 上的 node_modules 文件夹

或者，您可以决定将 node_modules 文件夹发布到 Surge，方法是添加 Surge 忽略文件并恢复该文件夹：https://surge.sh/help/ignoring-files-and-directories

在您要部署的文件夹中，创建一个名为 .surgeignore 的填充，然后添加：

!node_modules/

选项 3：设置构建工具

如评论中所述，您可以设置 Webpack 或类似工具将 Paper.js 和您的其他 JavaScript 打包在一起，但这可能比您需要的要多，具体取决于你的项目在哪里。

如何将包含 npm 下载包的网站部署到 surge / gh-pages？

How to deploy websites that include npm-downloaded packages to surge / gh-pages?

javascript

deployment

node-modules

surge.sh

选项 1：现在为您的 npm 依赖项使用 unpkg 服务

选项 2：Un-ignoreSurge 上的 node_modules 文件夹

选项 3：设置构建工具