标签: jamstack

在最新版本的 Nuxt (2.14) 中，他们引入了在不更改代码时构建应用程序的优化（以显着缩短构建时间）。

我在 jamstack 中制作网站，在 netlify 上部署nuxt generate，直到现在，使用target: 'server'. 我尝试了新target: 'static'的以利用这个新功能，但我的代码不会构建，因为在这种模式下，应用程序似乎无法访问this.$route以生成动态页面。

所以，我的问题是：这彼此有何不同？当我切换target到我要注意什么？

这可能是一个愚蠢的问题，但我现在才刚开始从事 Web 开发，而且我对 JAMStack 尤其陌生。

我一直在阅读，从我得到的内容来看，基本上在 JAMStack 中，我们将所有内容都提供给前端应用程序，因此 Javascript 可以像我们的操作系统一样，并通过 API 世界获取所有内容。

虽然，这在我看来有点像 SPA 的工作方式。我们通过 API 获取我们想要的内容并相应地重新呈现页面的部分内容。

我在这里缺少什么？任何人都可以指出我正确的方向并比较这两者的不同之处以及这些差异的优点/缺点是什么？

谢谢

我是 JAM 堆栈的新手。JAM 堆栈中的 Web 应用程序（我在 Netlify 中托管我的应用程序）将完全依赖 API 来存储信息和身份验证，对吗？

所以我担心我必须在我的 JavaScript 代码中公开我所有的 API 密钥。任何知道如何打开站点源代码的人都可以看到我的 API 秘密，并且很容易被滥用。

我是通过一个开放的问题JAM栈回购阅读这里Github上

如何保护我的 API 密钥免遭窃听和滥用？

在这种情况下，“最佳实践”是什么？

提前致谢

我有 javascript 函数，我想同时运行服务器端和客户端。服务器端使用node.js并可以很好地处理导入。

然而，客户端我想要一个带有内联 JavaScript 的单个脚本标签。为了实现这个目标，我知道我需要一个捆绑器将模块拉入主脚本文件中。我选择 rollup 来完成这项工作。

这是我尝试过的示例。我做了一个模块test.js。这是一个返回字符串的简单函数：

// test.js

const test = () => {
    return 'testing'
}

module.exports = test

这是主要的 javascript 文件，main.js. 我想要将函数拖入的文件test.js：

// main.js

import test from "/test.js"

console.log(test())

这是我希望main.js捆绑后的样子：

// main.js

const test = () => {
    return 'testing'
}

console.log(test())

我想简单地将函数拉入文件中。

相反，汇总会产生以下结果：

(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? factory(require('../../../../../../../js/test.js')) :
    typeof define === 'function' && …

遵循此处的 Sveltekit 文档：https ://kit.svelte.dev/docs/creating-a-project

一切都很好，直到 npm run dev 命令，然后结果是：

$ npm run dev\n\n> hoa@0.0.1 dev\n> vite dev\n\nX [ERROR] [plugin externalize-deps] Missing "./vite" export in "@sveltejs/kit" package\n\n    node_modules/esbuild/lib/main.js:1352:27:\n      1352 \xe2\x94\x82         let result = await callback({\n           \xe2\x95\xb5                            ^\n\n    at bail (file:///D:/Sites/sveltekit/hoa/node_modules/vite/dist/node/chunks/dep-ed9cb113.js:15932:8)\n    at resolve$1 (file:///D:/Sites/sveltekit/hoa/node_modules/vite/dist/node/chunks/dep-ed9cb113.js:16009:10)\n    at resolveExports (file:///D:/Sites/sveltekit/hoa/node_modules/vite/dist/node/chunks/dep-ed9cb113.js:22961:12)\n    at resolveDeepImport (file:///D:/Sites/sveltekit/hoa/node_modules/vite/dist/node/chunks/dep-ed9cb113.js:22979:31)\n    at tryNodeResolve (file:///D:/Sites/sveltekit/hoa/node_modules/vite/dist/node/chunks/dep-ed9cb113.js:22668:20)\n    at file:///D:/Sites/sveltekit/hoa/node_modules/vite/dist/node/chunks/dep-ed9cb113.js:63027:40\n    at requestCallbacks.on-resolve (D:\\Sites\\sveltekit\\hoa\\node_modules\\esbuild\\lib\\main.js:1352:28)\n    at handleRequest (D:\\Sites\\sveltekit\\hoa\\node_modules\\esbuild\\lib\\main.js:720:19)\n    at handleIncomingPacket (D:\\Sites\\sveltekit\\hoa\\node_modules\\esbuild\\lib\\main.js:742:7)\n    at Socket.readFromStdout (D:\\Sites\\sveltekit\\hoa\\node_modules\\esbuild\\lib\\main.js:670:7)\n\n  This error came from the "onResolve" callback registered here:\n\n    node_modules/esbuild/lib/main.js:1276:20:\n      1276 \xe2\x94\x82 …

我一直在研究JAMstack。据我了解 JAMstack 的意思是：

• J-JavaScript
• A-API
• M - 标记

我有两个问题：

1. 我实际上不清楚这里的标记。是预渲染标记（即预渲染 HTML）吗？

2. 我们的办公室项目是使用 React 和外部 API 开发的。由于该项目是使用 JavaScript（React）和 API 开发的，并且我们知道 React 从服务器交付预渲染块，那么它是 JAMstack 吗？

我正在创办一家提供 Web SaaS 的初创公司 ( https://tuilder.com/ )。宏伟的计划和潜力。

我对 YugaByte 的全球复制感兴趣。目前，我已经构建了 BadgerDB 的抽象，这是一个用 GoLang 编写的键值数据库。我们的抽象维护索引，有点类似于 graphql，而且速度非常快。是否可以使用 YugaByte DB 进行全局复制作为键值存储？

我的目标是全球分布式的 KeyValue 的性能。

据我了解，写入速度会随着每个额外的复制节点而降低。是对的吗？是否有可能转而青睐速度并在节点之间建立最终一致的模型？我们正在构建 JAM 堆栈。因此，我们需要在 YugaByte 和客户端之间的服务器上有一个身份验证层，理想情况下该层将提供与我们当前在 Go 中编写的相同的抽象。

节点之间的负载平衡如何将请求路由到最近的地理位置？

YugaByte 平台可以实现这一切吗？

我使用 vue cli 创建了一个 vue 项目：

vue create myproject

我认为我这样做时的输出npm run build将是一个单页应用程序（SPA）。使用现有代码生成静态网站（SSG / Jamstack）需要什么？我知道我可以使用 Nuxt 轻松做到这一点，但我想知道如何在没有 Nuxt 的情况下做到这一点。

编辑：我认为我的意思是预先渲染一些页面，以便更好地进行搜索引擎优化。

我有一个使用 ES6 模块的普通 HTML/CSS/JavaScript 站点（存储库）。可以成功部署到GitHub页面和Netlify。

在我的 HTML 中，我main.js像这样导入：

<script src="js/main.js" type="module" defer></script>

在我的main.js文件中，我导入了我制作的其他模块，如下所示：

import * as data from './data.js';
import displayUserCard from './displayUserCard.js';

现在我还想安装和导入npm 模块以在我的网站上使用，就像我在我的网站上使用我自己的代码一样。

我这样安装lodash：

npm i lodash

然后在我的main.js文件中，我像这样导入 lodash，就像我在 Node 应用程序中所做的那样：

import _ from 'lodash';

这当然不起作用，并给了我以下错误，因为我们现在在浏览器中而不是在 Node 应用程序中：

^未捕获类型错误：无法解析模块说明符“lodash”。相对引用必须以“/”、“./”或“../”开头。^

经过研究，我了解到这样的开发环境需要一个 Web 捆绑器，但我发现从 Browserify 和 RequireJS 等过时的工具，到 WebPack 等过于复杂的工具，再到 Parcel、Vite 和 Snowpack 等较新的捆绑器，这些都不需要似乎没有解决为开发和生产构建轻松捆绑 npm 包的问题。

2021/2022 年，在普通 HTML/CSS/JavaScript 前端应用程序中使用 lodash 等节点模块以便可以在 GitHub 页面、Netlify 和 Vercel 等 CDN 上进行捆绑、构建和部署的最直接方式是什么？

我已经尝试了gatsby.js一段时间，除此问题外，其他一切都进行得很好，我无法将jQuery脚本包含到应用程序中，以便在渲染gatsby应用程序后加载它，我将包含的脚本标签该html.js文件并加载它，但似乎代码是在react将内容呈现到我尝试使用的屏幕上之前执行的simple-load-script，以及将其包含componentDidMount在html.js应用程序的方法上。但是没有运气，这是我html.js文件的源代码：

html.js

import React from "react"
import PropTypes from "prop-types"

export default class HTML extends React.Component {
  componentDidMount() {
    console.log('hello world');
  }
  render() {
    return (
      <html {...this.props.htmlAttributes}>
        <head>
          <meta charSet="utf-8" />
          <meta httpEquiv="x-ua-compatible" content="ie=edge" />
          <meta
            name="viewport"
            content="width=device-width, initial-scale=1, shrink-to-fit=no"
          />
          {this.props.headComponents}
        </head>
        <body>
          {this.props.preBodyComponents}
          <div
            key={`body`}
            id="___gatsby"
            dangerouslySetInnerHTML={{ __html: this.props.body }}
          />
          {this.props.postBodyComponents}
        </body>
      </html>
    )
  }
}

HTML.propTypes = {
  htmlAttributes: PropTypes.object,
  headComponents: PropTypes.array,
  bodyAttributes: PropTypes.object,
  preBodyComponents: …