pixi.js安装后项目不能启动 , 报错

最新推荐文章于 2024-07-17 11:32:34 发布
最新推荐文章于 2024-07-17 11:32:34 发布
阅读量642 收藏
点赞数 1
文章标签： vue.js typescript node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46159033/article/details/129399838
版权

我安装时候, 使用 yarn add pixi.js 或者npm i pixi.js 都会出现下面的bug

出现Module parse failed: Unexpected token (9:53)
You may need an appropriate loader to handle this file type

 这问题困扰了我好久 , 结果我想了想可能是版本的问题 , 这样下载的是最新的版本
 

于是我重新随便的下载了个老版本 , 项目不报错了 yarn add pixi.js@5

困扰了我一上午呢

 

Xiyeeee
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
pixi-miniprogram:一个可运行于微信小程序的PIXI引擎，通过模拟window环境，有些功能小程序无法模拟，就直接修改了PIXI引擎代码，最终使得PIXI引擎正常运行在小程序上
05-02
#pixijs 小程序 WebGL 的适配版本。 2021.1.11 修复graphics在新版微信内不正常显示的bug 2021.1.14 改写PIXI.Text和PIXI.Graphics的渲染逻辑，需要在wxml文件中添加两个type 2d的canvas，然后把canvas传入PIXI中。其中一个用于Graphics渲染，一个用于Text渲染，传入参数示例：PIXI = createPIXI(canvas,stageWidth,canvas2d,canvas2dText) 2021.3.25 添加遮罩实现示例 2021.3.29 添加performance的判断 使用 可参考 example 目录下的示例项目或参照以下流程： 复制dist目录的pixi.miniprogram.js到目录libs下 导入小程序适配版本的 pixi.js import {createPIXI} from
pixi-ease:使用缓动函数的pixi.js动画库
05-06
一个简单而强大的pixi.js缓动/补间/动画库 特征 缓解任何pixi.js参数，包括色调（使用混合功能或阶梯式） 按名称使用任何Penner函数或任何用户定义的函数 支持通用数字参数 使用一个参数更改比例或偏斜度（例如，...
【electron-vite+live2d+vue3+element-plus】实现桌面模型宠物+桌面管理系统应用（踩坑）
twelve的博客
07-02 423
使用【electron-vite】框架搭建一个桌面宠物应用
Vue3安装pixi.js 项目无法识别 ?. 语法，导致报错Module parse failed: Unexpected token
qq_44146522的博客
08-21 1597
You may need an appropriate loader to handle this file type, currently no loaders
uniapp引入使用pixi.js遇到的坑
weixin_57286220的博客
05-24 987
我最开始是7.2.4，但是会报错。，所以我降到了4.8.9版本。
angular项目中常见报错及解决方法
alice9999999的博客
03-31 1340
（1）产生原因：其实这是 Angular 的警告机制，防止由于模型数据（model data）与视图 UI 不一致，导致页面上存在错误或过时的数据展示给用户。
Module parse failed: Unexpected token (1:0)You may need an appropriate loader to handle this file t
qq_56444564的博客
04-16 2736
报错截图：解决办法：（检查组件后缀名是否有大写，全部改成小写）
项目无法识别 ?. 语法，导致报错Module parse failed: Unexpected token
热门推荐
weixin_45717984的博客
05-27 5万+
首先找到报这个问题的地方 我这里是因为es语法问题 如果你也是npm安装了一个包，然后在导入的时候报这个语法错，那你可以接着往下看，如果不是就不用往下看了 问题原因： 因为导入的组件库是直接上源码的，必须告知webpack，需要编译一下这个库，让源码中的es6、es7的特性转换为es5 解决方案： 1.在vue.config.js 里面加上 transpileDependencies: [‘/@yabby-business/’] 2.还有一种方式在babel.config.js中指定库导入的时候用的编
z-game:使用纯 pixi.js 和 box2d 测试项目
07-12
本项目“z-game”就是一个利用纯JavaScript库Pixi.js和Box2D物理引擎构建的Web游戏测试案例，它为我们展示了如何在浏览器环境中实现复杂的游戏逻辑和物理模拟。 Pixi.js，全称为“2D WebGL渲染器”，是一个强大的...
TowerDefense:使用pixi.js制作的塔防游戏
06-18
总的来说，使用Pixi.js开发塔防游戏，不仅可以利用其强大的2D渲染能力，还能享受到JavaScript的灵活性和便利性。通过熟悉和掌握Pixi.js的API，开发者可以快速构建出功能丰富的塔防游戏，为玩家带来沉浸式的游戏体验...
tiled.js:使用 PIXI.js 平铺地图
07-13
1. **安装和引入库**：首先，你需要在项目中安装`tiled.js`和`PIXI.js`。通常，你可以使用npm进行安装： ``` npm install pixi.js tiled-js ``` 2. **加载TMX文件**：使用`tiled.js`读取TMX文件，解析地图数据。...
pixi.min.js
04-30
开发者无需专门学习 WebGL 就能感受到强大的硬件加速的力量。 PixiJS 会帮助你用 JavaScript 或者其他 HTML5 技术来显示媒体，创建动画或管理交互式图像，从而制作一个游戏或应用。它拥有语义化的，简洁的 API 接口...
PixiJS超级详细教程【从入门到入土-上】
烟溪彭于晏的博客
10-10 9598
来自GitHub教程
You may need an appropriate loader to handle this file type.您可能需要适当的加载程序来处理此文件类型。
weixin_53812239的博客
08-15 4405
You may need an appropriate loader to handle this file typ ，webpack-dev-server
浏览器报错Uncaught ReferenceError: require is not defined解决方案
weixin_42082342的博客
04-19 5345
Uncaught ReferenceError: require is not defined
Module parse failed: Unexpected token（双问号无法识别）
qq_41763326的博客
01-05 1万+
问题： error in ./node_modules/@react-leaflet/core/esm/path.js Module parse failed: Unexpected token (10:41) You may need an appropriate loader to handle this file type, currently no loaders areo process this file. See https://webpack.js.org/concepts#loader
Module parse failed: Unexpected token
kaiyuantao的专栏
03-30 2万+
Module parse failed: Unexpected token (9:16) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders 报这个错是因为webpack没有配置对应的loader. 如果你是开发环境，使用npm st
SketchUp 插件管理器出现“app.soy.js failed to load! “错误的解决方法(中英文版本测试通过)
akulakk's memory stack
08-11 1078
我用的是SU2020, 因为看教程的原因把SU改为了英文版, 也就是在启动命令参数加上 /lang en 这2个参数来启动, 这个带来的问题是插件管理器脚本没有正确的识别en这个参数导致加载错误的路径. 解决的办法是打开 C:\Program Files\SketchUp\SketchUp 2020\Dialogs\ExtensionManager\js\app.js 搜索 console.log('> locale: ' + locale); 在这一行上面添加 locale = locale ==
Django+vue自动化测试平台（28）-- ADB获取设备信息
最新发布
测试小老弟的博客
07-17 406
adb的全称为Android Debug Bridge，就是起到调试桥的作用。通过adb可以在Eclipse中通过DDMS来调试Android程序，说白了就是调试工具。adb的工作方式比较特殊，采用监听Socket TCP 5554等端口的方式让IDE和Qemu通讯，默认情况下adb会daemon相关的网络端口，所以当我们运行Eclipse时adb进程就会自动运行。
vue2 引入pixi.js v7.2.4报错
07-08
如果您在Vue 2中引入Pixi.js v7.2.4时遇到了错误，可能是因为Vue 2与Pixi.js v7.2.4之间存在不兼容的问题。Vue 2通常与较旧版本的Pixi.js兼容性较好，而Pixi.js v7.2.4是较新的版本，可能会导致一些问题。 您可以尝试使用Vue 2与Pixi.js v5.x.x兼容性更好的版本。以下是在Vue 2中引入Pixi.js v5.x.x的步骤： 1. 在您的Vue项目中安装Pixi.js依赖。打开终端，进入您的项目根目录，然后运行以下命令： ```shell npm install pixi.js@^5.3.3 ``` 或 ```shell yarn add pixi.js@^5.3.3 ``` 2. 安装完成后，在需要使用Pixi.js的组件文件的顶部添加以下代码： ```javascript import * as PIXI from 'pixi.js'; ``` 3. 在Vue组件的`mounted`生命周期钩子中，添加以下代码来创建一个Pixi应用： ```javascript mounted() { const app = new PIXI.Application({ width: 800, height: 600, backgroundColor: 0x1099bb }); this.$refs.canvas.appendChild(app.view); // 在这里添加您的Pixi.js逻辑 } ``` 4. 最后，在`<template>`标签中添加一个`<div>`元素来容纳Pixi应用的画布。例如： ```html <template> <div ref="canvas"></div> </template> ``` 通过以上步骤，您应该能够在Vue 2中成功引入Pixi.js v5.x.x，并且可以使用Pixi.js创建图形和动画。记得在组件销毁时，清理相关的资源以避免内存泄漏。如果问题仍然存在，请提供更具体的错误信息，以便我能够更好地帮助您解决问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值