svelte - 如何将 pixi.js 导入 Svelte/Sapper 应用程序?
问题描述
我是 Svelte 的新手,正在尝试将 pixi.js 导入我的应用程序。在这篇文章Svelte Mount DOM Element from Javascript之后,我尝试将 pixi.js 导入我的 svelte 应用程序
我通过以下方式安装了 pixi:
yarn add pixi.js --dev
但是,当我尝试导入 pixi.js 时,我收到“ReferenceError:未定义窗口”错误。这是一个简单的例子:
<script>
import * as PIXI from 'pixi.js'
import { onMount } from 'svelte';
let view;
let app;
onMount(() => {
app = new PIXI.Application({
view,
// ...other props
});
});
</script>
<canvas bind:this={view}/>
我在 reddit 的某个地方读到我需要使用以下方法解决这个问题:
onMount(async ()=>{
const PIXI = await import('pixi.js');
app = new PIXI.Application({
view,
// ...other props
});
});
但这也没有用。当我使用全局脚本标签时一切都很好,但我宁愿使用上面的导入。我究竟做错了什么?谢谢!
**编辑:经过一些研究,我了解到我需要从非 SSR 的角度来解决这个问题。https://sapper.svelte.dev/docs#Making_a_component_SSR_compatible
这是我尝试过的:
<script>
import { onMount } from "svelte";
let MyComponent;
onMount(async () => {
const module = await import ('../components/pixi/mycomponent.svelte');
MyComponent = module.default;
});
</script>
<svelte:component this={MyComponent}/>
mycomponent.svelte:
<script>
import * as PIXI from "pixi.js";
import { onMount } from 'svelte';
let view;
let app;
app = new PIXI.Application({
view,
width: 256, // default: 800
height: 256, // default: 600
antialias: true, // default: false
transparent: false, // default: false
resolution: 1, // default: 1
backgroundColor: 0x090f15
// ...other props
});
</script>
<style>
canvas {
width: 100%;
margin: 0 auto;
}
</style>
<div class="content" bp="padding">
<canvas bind:this={view} />
</div>
现在我得到:
TypeError: Failed to resolve module specifier "url". Relative references must start with either "/", "./", or "../".
显然找不到pixi.js?我的 rollup.config.js 有问题吗?
import resolve from 'rollup-plugin-node-resolve';
import replace from 'rollup-plugin-replace';
import commonjs from 'rollup-plugin-commonjs';
import svelte from 'rollup-plugin-svelte';
import postcss from 'rollup-plugin-postcss';
import babel from 'rollup-plugin-babel';
import { terser } from 'rollup-plugin-terser';
import config from 'sapper/config/rollup.js';
import pkg from './package.json';
const mode = process.env.NODE_ENV;
const dev = mode === 'development';
const legacy = !!process.env.SAPPER_LEGACY_BUILD;
const onwarn = (warning, onwarn) => (warning.code === 'CIRCULAR_DEPENDENCY' && /[/\\]@sapper[/\\]/.test(warning.message)) || onwarn(warning);
const dedupe = importee => importee === 'svelte' || importee.startsWith('svelte/');
const postcssOptions = () => ({
extensions: ['.scss', '.sass'],
extract: false,
minimize: true,
use: [
['sass', {
includePaths: [
'./src/theme',
'./node_modules',
// This is only needed because we're using a local module. :-/
// Normally, you would not need this line.
//path.resolve(__dirname, '..', 'node_modules')
]
}]
]
});
export default {
client: {
input: config.client.input(),
output: config.client.output(),
plugins: [
replace({
'process.browser': true,
'process.env.NODE_ENV': JSON.stringify(mode)
}),
svelte({
dev,
hydratable: true,
emitCss: false,
css: true
}),
resolve({
browser: true,
dedupe
}),
commonjs(),
postcss(postcssOptions()),
legacy && babel({
extensions: ['.js', '.mjs', '.html', '.svelte'],
runtimeHelpers: true,
exclude: ['node_modules/@babel/**'],
presets: [
['@babel/preset-env', {
targets: '> 0.25%, not dead'
}]
],
plugins: [
'@babel/plugin-syntax-dynamic-import',
['@babel/plugin-transform-runtime', {
useESModules: true
}]
]
}),
!dev && terser({
module: true
})
],
onwarn,
},
server: {
input: config.server.input(),
output: config.server.output(),
plugins: [
replace({
'process.browser': false,
'process.env.NODE_ENV': JSON.stringify(mode)
}),
svelte({
generate: 'ssr',
dev
}),
resolve({
dedupe
}),
commonjs(),
postcss(postcssOptions())
],
external: Object.keys(pkg.dependencies).concat(
require('module').builtinModules || Object.keys(process.binding('natives'))
),
onwarn,
},
serviceworker: {
input: config.serviceworker.input(),
output: config.serviceworker.output(),
plugins: [
resolve(),
replace({
'process.browser': true,
'process.env.NODE_ENV': JSON.stringify(mode)
}),
commonjs(),
!dev && terser()
],
onwarn,
}
};
解决方案
显然我需要:
preferBuiltins: false,
在我的客户解决。
推荐阅读
- c++ - C++ 从 std::string 数组创建 std::vector
- flutter - 如何根据单元格内容显示具有扩展宽度和高度的 Table / DataTable?(如 HTML 表格行为)
- django - Djoser 在电子邮件中使用不同的域
- sql - 使用有序子字符串连接表
- python - Python argparse - 长参数名称的帮助文本
- shopify - 如何将 Shopify 上的产品从一个变体拆分为两个变体
- c++ - 嵌套的 wxSizer;堆叠面板垂直包装内容
- java - 带有 Lombok 的 Java 对象不能在 Spring Boot 中的切点注释类中工作
- javascript - 通过 REACT 中的按钮传递信息
- angular - 多版本页面的 Angular 动态路由声明