Skip to content

Lack of documentation where lib can be imported at ES-6 modules in Vite Projects #10

@pc-magas

Description

@pc-magas

I have a case that I need to use the EasyEditor as ES-6 Module as follows:

import EasyEditor from 'easyeditor';

Usage Scenario with vite

The scenario I am doing is that I did first:

npm install --save jquery easyeditor

Then in my laravel project I used the vite with the following vite.config.js:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

import { readdirSync,lstatSync } from 'fs';
import { resolve } from 'path';


function getFilesFromDir(dir) {
    const filesToReturn = [];

    function walkDir(currentPath) {

        if(lstatSync(currentPath).isFile()){
            filesToReturn.push(currentPath);
            return;
        }

        const files = readdirSync(currentPath);
        for (let i in files) {
            console.log(files[i]);
            const curFile = resolve(currentPath, files[i]);
            if(lstatSync(curFile).isDirectory()){
                walkDir(curFile);
                continue;
            }
            const file = resolve(currentPath, files[i]);
            filesToReturn.push(file);
        }
    }

    walkDir(resolve(__dirname, dir));
    return filesToReturn;
}


// Get all .css and .scss files in the directory
const js = getFilesFromDir('./resources/js');

const paths = [


    ...js,

    'node_modules/jquery/dist/jquery.js',
    'node_modules/jscroll/dist/jquery.jscroll.min.js',

    "node_modules/easyeditor/src/easyeditor.css",
    "node_modules/easyeditor/src/jquery.easyeditor.js"
]



export default defineConfig({
    plugins: [
        laravel({
            input:paths,
            refresh: true,
        }),
    ],
    build: {
        rollupOptions: {
            external: [
                "js/modules/*",
            ],
            include:[
                'assets/js/utils.js'
            ]
        }
    }
});

And then I do npm run build.

But in the documentation I see no case on how can be used with ES-6 modules. To be more specific I see no usage with vite into these pages:

That helps me to reduce the nessesary dependencies upon page load because vite (and webpack or silimar tools) do optimize Js code removing unsused functions, resulting faster page load.

Is there a way to do it?

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions