Как реализовать через импорт без fs?

Question

[Фрол Шмелев]

Здравствуйте. вот index.js моего приложения. подскажите как убрать fs и реализовать через import export.
и почему нельзя добавлять переменную в readFileSync?

import {contacts} from "./modules/contacts/contacts";
import {form} from "./modules/form/form";
import img from "./public/image/user.jpg";
import "./public/cssout/mainin.css"
import "./public/cssout/chat.css"
import "./public/cssout/btn.css"
import "./public/cssout/form.css"
//import fs from 'fs';

const fs = require('fs');
const somefile="./modules/navbar/navbar.ejs"
let someContent = fs.readFileSync(somefile, 'utf8');  - эта строчка не работает выдает readFileSync is not a function, а если прописать явно без переменной то все работает.
console.log(someContent)

const ejs = require('ejs');
const pages=['/chat', '/contacts', '/settings', '/login', '/reg'];
let path=window.location.pathname;
let getparam=window.location.search

let htmlContent = fs.readFileSync(__dirname + '/modules/navbar/navbar.ejs', 'utf8');
let htmlRenderized = ejs.render(htmlContent, {active: path});

let test=ejs.render("hj", {active: path});
console.log(test)


if(path=="/contacts"){
    var mainContent = fs.readFileSync(__dirname + '/modules/contacts/contacts.ejs', 'utf8');
    var mainRenderized = ejs.render(mainContent, {contacts: contacts(), img:img});
}


if(path=="/chat"){
let chatId='x';
    if(getparam){
        const regex = /\?id=/gm;
        chatId=getparam.replace(regex, "")
    }
    var mainContent = fs.readFileSync(__dirname + '/modules/chat/chat.ejs', 'utf8');
    var mainRenderized = ejs.render(mainContent, {contacts: contacts(), path:path, chatId:chatId, img:img});
}


if(path=="/settings"){
    let fields=['first_name', 'second_name', 'login', 'email', 'phone','oldPassword', 'newPassword', 'avatar']
    let btn_name= 'Save'
    let inputs=form(fields);
    var mainContent = fs.readFileSync(__dirname + '/modules/form/form.ejs', 'utf8');
    var mainRenderized = ejs.render(mainContent, {inputs: inputs, btn_name: btn_name, reg: false});
}

if(path=="/login"){
    let fields=['login', 'Password']
    let btn_name= 'Войти'
    let inputs=form(fields);
    var mainContent = fs.readFileSync(__dirname + '/modules/form/form.ejs', 'utf8');
    var mainRenderized = ejs.render(mainContent, {inputs: inputs, btn_name: btn_name, reg: true});
}

if(path=="/reg"){
    let fieldsreg=['first_name', 'second_name', 'login', 'email', 'phone','Password']
    let btn_name= 'Зарегистрироваться'
    let inputs=form(fieldsreg);
    console.log(inputs);
    var mainContent = fs.readFileSync(__dirname + '/modules/form/form.ejs', 'utf8');
    var mainRenderized = ejs.render(mainContent, {inputs: inputs, btn_name: btn_name, reg: false});
}

if(pages.includes(path)==false){
    var mainContent = fs.readFileSync(__dirname + '/modules/err/404.ejs', 'utf8');
    var mainRenderized = ejs.render(mainContent);
}

const navbar = document.querySelector('#navbar');
const main= document.querySelector('#main');

navbar.innerHTML+=htmlRenderized;
main.innerHTML+=mainRenderized;

Answer 1

[Юрий Пузыня]

Судя по всему это клиентский код.
При этом вы пытаетесь на клиенте использовать модуль файловой системы, что конечно же невозможно.

Почему этот код работает при использовании строки вместо константы, мне предположить сложно. Вероятно вы используете вебпак и в нем есть какая-нибудь магия про модуль файловой системы. Но я о такой магии не слышал.

Ваша задача - инпортировать *.ejs модуль так, чтобы он не исполнился, а просто лег строчкой в память.
Если вы используете вебпак, то для этого подойдет raw-loader https://v4.webpack.js.org/loaders/raw-loader/ или более современная альтернатива, которая так де указана в этой документации.

Comments

[Фрол Шмелев]

Здравствуйте, использую parcel. Но можно ли реализовать чтение содержимого файла ejs без использования fs.readFileSync? как переделать это задействовав import export?

[Фрол Шмелев]

установил npm i -D parcel-transformer-ejs
создал в корне .parcelrc
{
"extends": ["@parcel/config-default"],
"transformers": {
"*.ejs": ["parcel-transformer-ejs"]
}
}

но теперь ошибка Error: input.fileName.split is not a function