我有一个基于TypeScript的Vuejs项目,使用Vite编译并打包。
我正在尝试配置构建系统,以编译我的定制服务工作者(src/service worker.ts),并将输出放在dist/service worker中。js。特别是,我不希望它作为应用程序JS包的一部分,因为它需要作为静态网站的一部分,在那个众所周知的URL上提供。
现有结构如下:
index.html
public/
favicon.ico
src/
service-worker.ts
main.ts
/* etc */
我希望输出是这样的:
dist/
index.html
assets/index.[hash].js
assets/vendor.[hash].js
/* ... */
service-worker.js # <-- I would like the file emitted here
如果Service Worker不需要转录/编译,我知道我可以简单地将其包含在public/
中,并且它会原封不动地复制到dist/
文件夹中。
我已经看了vite-plugin-pwa,但这是相当不透明和绑定到工作箱。
其他相关问题与人们希望从其构建输出中完全排除文件的情况有关,这不是我想要的。
如何编译TypeScript文件但将其输出未捆绑在我的dist文件夹中?
您可以通过build配置入口点和输出位置。在Vite配置中的汇总选项
:
>
为service-worker.ts
文件添加切入点(通过build.rollupOptions.input
)。
为输出文件名添加一个格式化程序,将服务工作者文件放在输出目录的根目录中(通过build.rollupOptions.output.entryFilenames
)。
// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [vue()],
build: {
rollupOptions: {
input: {
// the default entry point
app: './index.html',
// 1️⃣
'service-worker': './src/service-worker.ts',
},
output: {
// 2️⃣
entryFileNames: assetInfo => {
return assetInfo.name === 'service-worker'
? '[name]-[hash].js' // put service worker in root
: 'assets/js/[name]-[hash].js', // others in `assets/js/`
}
},
},
},
})
演示
我尝试捆绑两个JavaScript模块,以便生成的代码在IE11中工作。为此,我设置了一个yarn/npm项目,它使用rollup.js进行捆绑,使用Babel进行转置。在我添加(非开发)依赖之前,一切都很好。 这里的细节: src/main。js src/utils。js package.json rollup.config.js 巴贝尔。配置。js 当我运行时,我会收到关于未解析依赖项的警告,
硬重装或硬刷新(例如,Chrome中的移位重装)似乎绕过了服务辅助角色。 例如,加载一个服务人员控制的页面,如https://airhorner.com/或https://wiki-offline.jakearchibald.com/,在开发工具中将网络设置为“离线”,然后重新加载页面会导致一个破碎的“没有互联网连接”页面。正常的重新加载会显示缓存的页面。) 有没有办法防止这种情况发生,或者在设备
我在项目中使用rollup withplugin捆绑css。是否可以同时生成这两个和使用这个插件还是其他插件? 我试图添加,但这只生成压缩版本,而不是两者。
创建响应应用时,默认情况下会调用Service Worker。为什么使用服务工人?默认调用的原因是什么?
我有一个用于缓存图像的服务人员,这个服务人员只在前端模板中注册,但它仍会不断扩展到我的管理模板中。 这导致我的表单在验证令牌受到影响时表现得不可预测。 用一些安慰。日志我认为安装事件是在进入请求页面之前触发的,但我无法确定当前/下一个URL。 如何防止服务人员扩散到管理面板并干扰页面?我只想缓存资产。 就相关而言,这是我的服务人员:
我在这个链接的页面中实现的service worker演示有一些问题。我试着为这个演示尽可能地减少代码,但是粘贴到这里太长了。 一个问题是,当页面完全加载时,我转到Chrome devtools的“应用程序”选项卡,我在缓存中看到了很多内容: 不清楚为什么有这么多缓存...可能是我正在加载的字体,但仍然...似乎很大。 更令人担忧的是,当我单击该部分中的按钮(所有选项均已打勾)时,饼图中红色的部分