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文件是从线上的版本拷贝下来的。

clipboard.png

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

clipboard.png

clipboard.png
index.js文件???,很迷

阅读 9.2k
4 个回答

1.对比一下本地js文件和CDN文件是不是一致
2.可在webpack配置中加入ts-loader
3.看看viz.js有没有npm包

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

说明它的在线版是已经编译为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貌似也用不了。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题