[英]Vue typescript import dependency
我正在尝试将彩虹代码节点模块添加到我使用 TypeScript 的 Vue 应用程序中。 此应用程序是使用 vue-cli 生成的。
Rainbow-code 是一个不是用 Typescript 编写的代码语法模块,我试图通过 main.ts 分发这个依赖项。 我可以复制依赖项并在 html 标签中导入相对路径。 但我希望更加熟悉在 Typescript 中导入模块。
导入我的依赖项时,我在 chrome 调试器中收到以下错误
rainbow-node.js?23f9:5 Uncaught TypeError: fs.readdirSync is not a function
at Object.eval (rainbow-node.js?23f9:5)
at eval (rainbow-node.js:14)
at Object../node_modules/rainbow-code/src/rainbow-node.js (chunk-vendors.js:2224)
at __webpack_require__ (app.js:854)
at fn (app.js:151)
at eval (main.ts:14)
at Module../src/main.ts (app.js:1313)
at __webpack_require__ (app.js:854)
at fn (app.js:151)
at Object.1 (app.js:1374)
这是我的 main.ts
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import Rainbow from 'rainbow-code';
import 'rainbow-code/themes/css/github.css'
import 'rainbow-code/src/language/python.js'
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
另外这里是源代码的一个片段
/* eslint-disable */
var fs = require('fs');
global.Rainbow = require('../dist/rainbow.js');
var files = fs.readdirSync(__dirname + '/language');
for (var i = 0; i < files.length; i++) {
require('./language/' + files[i]);
}
module.exports = global.Rainbow;
delete global.Rainbow;
/* eslint-enable */
另外,我想我成功地导入了它们? 但随后得到一个错误
python.js?86d9:6 Uncaught ReferenceError: Rainbow is not defined
at eval (python.js?86d9:6)
at Object../node_modules/rainbow-code/src/language/python.js (chunk-vendors.js:1971)
at __webpack_require__ (app.js:854)
at fn (app.js:151)
at eval (cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/ts-loader/index.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/ContentBlockComponent.vue?vue&type=script&lang=ts&:14)
at Module../node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/ts-loader/index.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/ContentBlockComponent.vue?vue&type=script&lang=ts& (app.js:1007)
at __webpack_require__ (app.js:854)
at fn (app.js:151)
at eval (ContentBlockComponent.vue?6714:1)
at Module../src/components/ContentBlockComponent.vue?vue&type=script&lang=ts& (app.js:1194)
这是依赖项网站https://github.com/ccampbell/rainbow#install-rainbow我不确定还有哪些其他信息对调试有用。
编辑。 这是我试图在我的 vue 组件中调用的功能。 但是我似乎无法在我的 vue 组件中访问此功能。
<script language='javascript' type='text/javascript'>
window.onload=function(){ Rainbow.color(); };
Rainbow.color();
</script>
“默认情况下 babel-loader 忽略 node_modules 中的所有文件”源
所以知道我会尝试将包添加到 vue.config.js 中的 transpileDependencies
module.exports = {
...
transpileDependencies: [
'rainbow-code'
// you may need to change the path/file name, Rainbow?
],
...
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.