0

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

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

谢谢！

4

1 回答 1

2

快速的回答是Surge.shnode_modules默认忽略该目录。如果node_modules在您的.gitignore文件中（可能应该是），它们也不会在 GitHub Pages 上可用。您是对的，通常构建工具或静态站点生成器将获取您的所有依赖项并将它们捆绑到构建文件中。

在评论的基础上，有几个选项可以帮助您快速解决问题：

选项 1：暂时将 unpkg 服务用于您的 npm 依赖项

一种选择是使用 Unpackage 之类的东西，它会直接从 npm 为您提供依赖项的预构建和托管版本：

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

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

选项 2：取消忽略 Surge 上的 node_modules 文件夹

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

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

!node_modules/

选项 3：设置构建工具

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

于 2019-07-05T23:12:41.147 回答