cdn 相关问题

我有一个简洁的组件，其他人想在他们自己的网站上使用，它是纯 HTML/JavaScript。我的计划是让他们使用引用我托管的 CDN 的脚本标记，如下所示：我有一个其他人想在他们自己的网站上使用的 svelte 组件，它是纯 HTML/JavaScript。我的计划是让他们使用引用我托管的 CDN 的脚本标签，如下所示： <script src="http://examplecdn.com/myfile.js"></script> 我是否需要以某种方式设置项目来促进这一点？如何找到特定组件的文件？我可以仅使用此组件创建一个新项目，但不想将代码从 svelte 转换过来。对于某些情况，为了测试，我建立了一个基本的精简项目： npm create svelte@latest my-example-module 并且刚刚添加了此代码来测试我是否可以得到一些简单的工作： <script lang="ts"> let text = "IT IS WORKING" </script> <h1>{text}</h1> <style> h1 {font-size: 3rem} </style> 我运行了npm run build，并且有很多已编译的JavaScript，但我不确定下一步是什么。 svelte 团队确实在推动用户使用 sveltekit，对于某种类型的项目来说，这可能是可行的方法，但恕我直言，在许多情况下，另一种方法可能更适合并且更简单。您可以尝试以下步骤：使用vite启动项目并选择svelete模板 npm init vite 我选择了这些选项 Need to install the following packages: create-vite Ok to proceed? (y) y √ Project name: ... vite-project √ Select a framework: » Svelte √ Select a variant: » JavaScript 然后您需要编辑vite.config.js文件并添加构建选项 import { defineConfig } from "vite"; import { svelte } from "@sveltejs/vite-plugin-svelte"; import { resolve } from "path"; export default defineConfig({ plugins: [svelte()], build: { rollupOptions: { output: { format: "iife", dir: resolve(__dirname, "./dist"), entryFileNames: "main.js", }, }, }, }); 我设置为 IIFE，但您可以使用任何其他格式（es、cjs、umd 等），请注意，默认设置为使用模块，因此您需要使用 type="module" : 导入它 <script type="module" crossorigin src="/main.js"></script> 这有点令人困惑，但是npm create svelte命令（即create-sveltenpm包）创建了一个SvelteKit应用程序，该应用程序（截至2023-09）不支持您的用例out-开箱即用。您可以改为使用仅限 svelte 的模板，如 Daniel 此处的建议或（一旦您开始对这一切感到满意）将自定义 vite 配置添加到 SvelteKit 骨架，如本食谱中所示以获得 svelte-> Web 组件库。在纯 HTML / vanilla JS 页面中包含 svelte 组件的方式取决于构建组件的方式：可以说更简单的方法是输出“Web 组件”（如本只是稍微过时的教程中详细介绍的）：将 <svelte:options customElement="my-card" /> 放在组件的 .svelte 文件顶部将 compilerOptions: { customElement: true, ... 放置在设置中指定的位置通过 <script> 将生成的 JS 包包含在 HTML 中在 HTML 中使用自定义元素：<my-card></my-card> 在常规模式下，svelte 生成必须手动绑定到 DOM 元素的 JS 类（客户端组件 API）详细说明 SvelteKit 与 Svelte 入门模板： SvelteKit 应用程序中的npm run build 构建站点，包括所有页面的服务器和客户端 JS (src/routes/*)（请参阅项目结构）。正如有关包装的官方文档所说：组件库与 SvelteKit 应用程序具有完全相同的结构，除了 src/lib 是面向公众的位，并且您的根 package.json 用于发布包。 src/routes 可能是库附带的文档或演示站点，也可能只是您在开发过程中使用的沙箱。如果您在create-svelte中选择“Library project”： create-svelte version 5.0.5 ┌ Welcome to SvelteKit! │ ◇ Where should we create your project? │ test │ ◆ Which Svelte app template? │ ○ SvelteKit demo app │ ○ Skeleton project │ ● Library project (Barebones scaffolding for your new Svelte library) └ ...您最终会得到一个稍微不同的设置，其中 includes 一个 @sveltejs/package devDependency 和一个 npm run package 脚本，该脚本运行 svelte-package 将组件从 src/lib 目录构建到 dist/ 文件夹。这为您提供了一个 npm 包，您可以在其他 svelte 应用程序中发布和/或安装，因为它仍然包含 .svelte 文件，并且依赖于具有构建步骤的目标应用程序。有 https://github.com/sveltejs/kit/issues/2572 建议扩展 svelte-package 来生成 JS 包，可以在非 svelte 应用程序中使用。但是不使用该套件的 svelte 项目（例如开始使用现已弃用的 sveltejs/template 或较新的 create-vite svelte 模板）甚至没有“app”部分，因此它们的构建步骤更接近你需要什么。

javascript svelte cdn svelte-component script-tag

回答 2 投票 0

为什么按产品列表中的更新按钮后不会出现加载微调器？

基于自定义输入字段来更新 WooCommerce 管理产品列表中的库存数量，这是我的一个问题的上一个答案。以下代码为数量列添加了一个自定义按钮，

php wordpress woocommerce font-awesome cdn

回答 1 投票 0

尝试从 CDN 加载 UI 组件时未定义 React

我正在尝试从 CDN 加载 React 组件，但在加载过程中，我收到“React 未定义”错误：笔记： CDN 对 React 和 ReactDOM 有外部依赖更多我...

reactjs typescript react-hooks cdn

回答 1 投票 0

尝试从 CDN 加载 UI 组件时出现无效的钩子调用

我正在尝试从 CDN 加载 React 组件，但在加载过程中，我收到“React 未定义”错误：笔记： CDN 对 React 和 ReactDOM 有外部依赖更多我...