Как мне обратиться к модулю fs у Node.js?

Question

[Тимофей Михайлов]

Запускаю: npm run serve

В проекте присутствует компонент VueBooks.vue

<template>
    <div class="main-body">
        <div class="books">
            <VueBook
                v-for="(book, index) in books"
                :key="index"
                :book="book"
                :index="(index+1)"
            />
        </div>
    </div>
</template>

<script>
    import VueBook from './VueBook.vue'
    import './Book' // подключаю JS-библиотеку

    export default {
        data: function () {
            return {
                books: []
            }
        },
        components: {
            VueBook
        }
    }
</script>

А вот дальше, идёт JS-файл с проблемой ...
Book.js

var fs = require('fs')
console.log(fs);
var file_readed = fs.readFileSync('./assets/library.json', 'utf8')
console.log(file_readed);

Первое сообщение, выдаёт мне что fs = {}
По этому следующая ошибка не удивительна: fs.readFileSync is not a function

Вопрос, почему у меня не получается обратиться к модулю для получения и записи данных в JSON ?

Answer 1

[Виталий]

тут важно понимать, что модуль fs это часть node.js и в бандле, который ты передаешь на клиент уже никакой node.js у клиента не будет. а потому ты должен обеспечить использование коровых модулей node.js только там, где ты знаешь, что это будет запущено нодой, а не в браузере.
Вебпак старается решить такого рода зависимости и может объявлять пустые объекты для фронта, но это все равно не приведет к ожидаемому тобой результату.

Answer 2

[Robur]

в nodejs - так как вы написали.
а в баузере (как вы пытаетесь использовать) - никак.

Если хотите использовать json файл, то либо через require('./myfile.json') и убедиться что вебпак это поймет, либо весь json скопировать в js файл

const json = {....} 
export default json

и подключить как обычно