Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/typescript/9.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Typescript Vue类型脚本导入依赖项_Typescript_Vue.js_Rainbow Js - Fatal编程技术网

Typescript Vue类型脚本导入依赖项

Typescript Vue类型脚本导入依赖项,typescript,vue.js,rainbow-js,Typescript,Vue.js,Rainbow Js,我正在尝试将rainbow代码节点模块添加到利用TypeScript的Vue应用程序中。此应用程序是使用vue cli生成的 rainbow代码是一个代码语法模块,不是用Typescript编写的 我正试图通过main.ts分发此依赖项。我可以复制依赖项并导入html标记中的相对路径。但我希望更熟悉在Typescript中导入模块 导入依赖项时,chrome调试器中出现以下错误 rainbow-node.js?23f9:5 Uncaught TypeError: fs.readdirSync i

我正在尝试将rainbow代码节点模块添加到利用TypeScript的Vue应用程序中。此应用程序是使用vue cli生成的

rainbow代码是一个代码语法模块,不是用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)
这是我的主要任务

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 */
这是我们的网站 我不确定还有哪些信息对调试有用

编辑。这就是我试图在vue组件中调用的功能。但我似乎无法在我的vue组件中访问此功能

<script language='javascript' type='text/javascript'>
  window.onload=function(){ Rainbow.color(); };
  Rainbow.color();
</script>

window.onload=function(){Rainbow.color();};
彩虹颜色();
“默认情况下,babel loader会忽略节点模块内的所有文件”

因此,我知道我会尝试将包添加到vue.config.js中的transpileDependencies

module.exports = {
  
  ...

  transpileDependencies: [
    'rainbow-code'
    // you may need to change the path/file name, Rainbow?
  ],

  ...

}
“默认情况下,babel loader忽略节点_模块内的所有文件”

因此,我知道我会尝试将包添加到vue.config.js中的transpileDependencies

module.exports = {
  
  ...

  transpileDependencies: [
    'rainbow-code'
    // you may need to change the path/file name, Rainbow?
  ],

  ...

}

我试过了,但没有成功。我仍然收到同样的错误我试过了,但没有骰子。我仍然收到相同的错误。您可以发布一个使用此模块的简化组件吗?您可以发布一个使用此模块的简化组件吗?