vue引入本地js文件打包报错,在index.html中引入在线版的js文件反而没问题?

vue-cli开发的项目,想引入viz.js,下载在线的js文件在本地导入时,VS Code会提示该js带有ts语法,导致没法打包运行。但在index.html中引入在线的viz.js绕过了打包问题,反而可以运行。
在普通的项目中通过script标签在引入该本地js文件也是可以直接运行的。
猜测问题可能是出现在打包上。
请问vue-cli该安装什么模块才能打包执行这带有ts语法的js文件?

线上的版本:<script src="https://cdn.bootcss.com/viz.j...;></script>
只要本地文件出现,打包运行就会报错。本地的js文件是从线上的版本拷贝下来的。

https://img4.mukewang.com/5cada7d9000117ec05910174.jpg

试着安装了ts的模块,但是依旧报错。
npm上有查到viz的包,安装了很久貌似下载了个空壳,下图是通过 npm install viz -S后node_modules文件夹里的文件

https://img1.mukewang.com/5cada7dc0001b18202630112.jpg

https://img.mukewang.com/5cada7de0001876a08000350.jpg


index.js文件???,很迷


慕容708150
浏览 4384回答 4
4回答

翻翻过去那场雪

贴个viz.js的线上链接和引入的那段代码。

Smart猫小萌

说明它的在线版是已经编译为js的版本.npm下载的是ts源码.一般来说,发布到npm上应该都会提供一份打包好的umd规范的代码.你可以检查下那个包里package.json里的main属性,看下它是指向哪个文件,如果确实是指向了ts源码,那你就得在你的项目的build/webpack.base.conf.js里增加对ts处理的插件,也就是ts-loader,具体配置需要查文档.当然,最省事的是你直接下载那份在线版的代码,放到你的项目里作为源码使用

慕莱坞森

关于问题算是被绕过去了。目前的解决方案是将本地的viz.js放在static目录下,然后在index.html中用script标签引入。虽然viz.js文件依旧会在VS Code中显示语法错误,但此时不影响打包和运行。npm安装viz的问题,貌似是安装错了,应该是安装viz.js而不是viz。安装了viz.js后在已安装模块中能找到代码,不过VS Code依旧显示语法错误。至于引用,呃,试着import方式引入文件,貌似没起到效果,npm安装的版本为2.0,在线版的2.0貌似也用不了。
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript