Зависимость импорта Vue TypeScript

Question

Я пытаюсь добавить модуль узла радужного кода в свое приложение Vue, которое использует TypeScript. Это приложение было создано с использованием 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>

Answer 1

"По умолчанию babel-loader игнорирует все файлы внутри node_modules" источник

Зная, что я попробую добавить пакет в transpileDependencies в vue.config.js

module.exports = {
  
  ...

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

  ...

}