Pixi.js: (v4) Ошибка GLSLify при использовании Webpack

Созданный на 6 сент. 2016  ·  22Комментарии  ·  Источник: pixijs/pixi.js

Запуск моего приложения Pixi после связывания с Webpack приводит к следующей ошибке:

browser.js:2 Uncaught Error: It appears that you're using glslify in browserify without its transform applied. Make sure that you've set up glslify as a source transform

Некоторые исследования показывают, что это распространенная проблема среди пользователей Webpack. https://gist.github.com/mjackson/ecd3914ebee934f4daf4#gistcomment -1842689

Это решение, кажется, работает для некоторых людей, но у меня все еще не работает. Я публикую вопрос, чтобы узнать, сможем ли мы придумать общее руководство по тому, как заставить Pixi работать в приложении webpack.

Чтобы воспроизвести проблему, просто создайте приложение webpack со следующим содержимым:

var PIXI = require('pixi.js');
var renderer = new PIXI.WebGLRenderer(256, 256);

Самый полезный комментарий

@endel @xTiming Привет, ребята. Я нашел путь.

webpack.config.js

module: {
        loaders: [
            ...
            { test: path.resolve(__dirname, 'node_modules', 'pixi.js'), loader: 'ify' },
            ...
        ]
    },

Разделитель окон есть.
В отличие от своего osx.

image

Это тоже видно в окне 10.

image
image

Все 22 Комментарий

Привет @ Adam-Meisen! Если бы эта проблема всплывала несколько раз, и я недавно испытал ее на собственном опыте! Думаю, пора это исправить

Как вы думаете, поможет ли замена glsify на необработанный текст? Мы пока не используем ничего особенного для glslify ..

Мысли приветствуются! 👍

Я только что обнаружил эту библиотеку, поэтому, боюсь, я действительно понятия не имею, как gslify используется внутри, но при некоторых поисках кажется, что это очень расплывчатое сообщение об ошибке с множеством потенциальных причин. То, что вы предложили, вероятно, сработает. Хотя в идеале я хотел бы выяснить, что вызывает это, полностью избежать этого, вероятно, неплохая идея.

Мне до сих пор не удалось заставить его работать, даже с ify-loader, browserify-versionify и glslify, поэтому я использовал сборку библиотеки cdn.

+1, чтобы исправить это, пока я использую предварительную версию
`импортировать PIXI из 'pixi.js / bin / pixi.js'

Я не очень хорошо знаком с Webpack. Может ли кто-нибудь создать простой тестовый проект / репо, воспроизводящий эту проблему, чтобы я мог использовать его для отладки?

Вы можете воспроизвести это следующим образом:

npm установить pixi.js webpack

webpack.config.js

var path = require('path');
var webpack = require('webpack');

module.exports = {
    entry: path.resolve(__dirname, 'index.js'),
    output: {
        path: path.resolve(__dirname, 'scripts/'),
        filename: 'bundle.js'
    },
    node: {
        fs: 'empty'
    }
};

index.js

var PIXI = require('pixi.js');
console.log(PIXI);
var renderer = new PIXI.WebGLRenderer(512, 512);

Из корневой папки проекта:

webpack --config webpack.config.js

Полученный (projectroot) /scripts/bundle.js доступен в веб-браузере и воспроизводит ошибку glslify. Просто написал и очень быстро сам это протестировал, если это не сработает, дайте мне знать, и я постараюсь исправить это для вас.

Здесь закрыты некоторые вопросы, касающиеся этой проблемы, например https://github.com/pixijs/pixi.js/issues/2439#issuecomment -243820323. Не уверен, как PIXI может обеспечить готовую совместимость без этой настраиваемой конфигурации в главном проекте.

Вы можете успешно потребовать его с помощью веб-пакета, используя конфигурацию ниже. Я тестировал только на webpack 2.x, но все должно быть хорошо и на 1.x.

webpack.config.js:

  module: {
    loaders: [
      /// ...
      { test: /node_modules\/pixi\.js/, loader: 'ify' },
    ]
  },

package.json:

"devDependencies": {
  "browserify-versionify": "^1.0.6",
  "glslify": "^5.1.0",
  "ify-loader": "^1.0.3",
  "pixi.js": "^4.0.0"
}

К сожалению, даже со всем этим у меня все равно не работает.

@ Адам-Майзен, это странно. Не могли бы вы поделиться своими webpack.config.js и package.json чтобы я мог посмотреть? Ваше здоровье!

+1 У меня тоже есть такая проблема. Я следил за временным решением

Привет, извините за ожидание, я пошел дальше и сократил свой проект до разумного минимума, чтобы максимально упростить выявление проблемы.

Как вы можете видеть в package.json , я включил все модули, которые, по мнению людей, необходимы для решения проблемы.

    "browserify-versionify": "^1.0.6",
    "glslify": "^5.1.0",
    "ify-loader": "^1.0.3",

https://gist.github.com/Adam-Meisen/db219b1815633400844b350788a11a6e

Сохраните файлы в каталог и запустите webpack , затем откройте index.html в браузере или обслужите его с помощью webpack-dev-server .

@ Адам-Майзен, привет, мне нравится. Есть ли у вас какие-либо ошибки в этой конфигурации? Здесь сработало:

screen shot 2016-09-15 at 22 26 06

Моя версия Node и NPM, работающая на OSX 10.10.1, выглядит следующим образом:

$ node --version
v6.3.0
$ npm --version
3.10.3

Я в Windows, использую node 6.3.1 и npm 3.10.6.
chrome_2016-09-15_15-35-38

Забыл упомянуть, что использую OSX. Должно быть какое-то отношение к этой проблеме: https://github.com/stackgl/glslify/issues/77

@endel Вышеупомянутое решение также не работает для меня - та же проблема, что и @ Adam-Meisen. Ошибка glslify по-прежнему возникает даже при установленных надлежащих пакетах и ​​идентичном файле webpack.config.js.

@xTiming, можете ли вы подтвердить,

@endel Windows 10, используя Chrome в качестве браузера.

@endel @xTiming Привет, ребята. Я нашел путь.

webpack.config.js

module: {
        loaders: [
            ...
            { test: path.resolve(__dirname, 'node_modules', 'pixi.js'), loader: 'ify' },
            ...
        ]
    },

Разделитель окон есть.
В отличие от своего osx.

image

Это тоже видно в окне 10.

image
image

Решение, опубликованное @kimorkim, работает хорошо, но портит все типы ввода из DefinficTyped. Есть ли способ присвоить бинарной версии псевдоним pixi.js?

для набора текста я обращаюсь к внешним js файлам.

  externals: {
      // require("jquery") is external and available
      //  on the global var jQuery
      "pixi.js": "PIXI"
  },
import * as PIXI from "pixi.js";

Я создал демонстрационный ресурс.

https://github.com/ossas/sudoku_example2

Скажите, если у вас когда-нибудь возникнут проблемы

На данный момент закрываю это, так как кажется, что здесь есть решения. Кроме того, для v5 мы будем отбрасывать glslfy и, возможно, также browserify.

Этот поток был автоматически заблокирован, поскольку после его закрытия в последнее время не было никаких действий. Пожалуйста, откройте новую проблему для связанных ошибок.

Была ли эта страница полезной?
0 / 5 - 0 рейтинги