Как импортировать pixi. js в приложение Svelte / Sapper? - PullRequest
Новая
       167

Как импортировать pixi. js в приложение Svelte / Sapper?

1 голос
/ 03 мая 2020

Я новичок в Svelte и пытаюсь импортировать pixi. js в мое приложение. Я попытался импортировать pixi. js в мое приложение svelte после этого поста Элемент DOM Svelte Mount из Javascript

Я установил pixi через: 

yarn add pixi.js --dev

Однако, когда я пытаюсь импортировать pixi. js Я получаю сообщение об ошибке "ReferenceError: window is notfined". Вот быстрый пример: 

<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,
  }
};

Ответы [ 2 ]

0 голосов
/ 07 мая 2020

У меня была та же проблема выше, но предоставленный ответ не решил мою проблему полностью .

Вся проблема (для меня):

Моя проблема была двоякой. Суть проблемы сводится к ССР.

Во-первых, мне пришлось установить preferBuiltins: false и настроить общий загрузчик ресурсов js, аналогично ответу, приведенному выше.

Во-вторых, я запускал polka@version:next (полька от Саппера микросервер по умолчанию), который, по-видимому, не был стабильным / совместимым в некоторых отношениях. Я не знаю точную несовместимость, но это интуитивное исправление решило мою проблему. Я просто изменил свой package.json и побежал npm install. Точную информацию смотрите ниже.

Целое решение (для меня):

Мне пришлось внести следующие изменения в rollup.config.js, а также package.json в исправить проблему:

  1. Мне пришлось сделать 2 изменения, мой rollup.config.js: 
export default {
    client: {
        ...,
        plugins: [
            ...,
            resolve({
                ...
                preferBuiltins: false // ADD THIS
            }),
            commonjs({
              ...,
              namedExports: {
                "resource-loader": ["Resource"] // ADD THIS
              }
            })
        ],
        ...,
    },
    ...,
};
В package.json мне пришлось изменить polka: 'next' -> polka: '^0.5.2 (последняя версия польки).

Вот мой последний package.json: 

{
  "name": "TODO",
  "description": "TODO",
  "version": "0.0.1",
  "scripts": {
    ...
  },
  "dependencies": {
    "polka": "^0.5.2", // THIS
    ...,
  },
  "devDependencies": {
    ...
  }
}
0 голосов
/ 04 мая 2020

Очевидно, мне нужно было: 

preferBuiltins: false,

В моем клиенте разрешить.

...