Skip to content

Help to find which JS file included which CSS file #203

Open
@nyroDev

Description

@nyroDev

I'm using the extract mode in order to create separated CSS file.

Let's say my rollup config list 2 files as inputs:

  input: [
       'assets/js/test1.js',
       'assets/js/test2.js'
   ],

test1.js imports test1.css
test2.js imports test2.css

I have the need to create a json file on the generateBundle callback which list all JS entries and their corresponding JS and CSS files.
It's used by my backend in order to create the corresponding script and link tags.

The JSON file needed should looks like:

{
  "entrypoints": {
    "test1": {
      "js": [
        "/lab/testJs/build_dev/test1-601b87d9.js"
      ],
      "css": [
        "/lab/testJs/build_dev/assets/test1-456a6f73.css"
      ]
    },
    "test2": {
      "js": [
        "/lab/testJs/build_dev/test2-acf10e55.js"
      ],
      "css": [
        "/lab/testJs/build_dev/assets/test2-fb3ec4ea.css"
      ]
    }
  }
}

Here is how looks like my generateBundle hook for now:


async generateBundle(options, bundle, isWrite) {
    if (!isWrite) {
        return;
    }
    // Read manifest.json just wrote by rollup-plugin-output-manifest
    const entrypoints = {
        'entrypoints': {}
    };
    const manifest = {};

    for (const [file, chunk] of Object.entries(bundle)) {
        if (chunk.isEntry) {
            const publicPath = config.publicPath + chunk.fileName;

            // Add it into manifest
            manifest[config.basePath + chunk.name + '.js'] = publicPath;

            // Add it as a standalong entrypoints
            entrypoints['entrypoints'][chunk.name] = {
                'js': [publicPath]
            };

            // Add it with all it's import in entrypoints, used for mobile
            const imports = [
                publicPath
            ];
            chunk.imports.forEach(imp => {
                imports.push(config.publicPath + imp);
            });

            entrypoints['entrypoints'][chunk.name + '_all'] = {
                'js': imports
            };
        }
    }

    this.emitFile({
        type: 'asset',
        fileName: 'entrypoints.json',
        source: JSON.stringify(entrypoints, false, 2)
    });
}

As you can see Im' relying on the imports array for JS file.

I tested many things using regular hooks, or editing the plugin to add more info.
I even tested to emit a new JSON file from the plugin that will contain info about what I need to and parse it in generatedBundle, but I cannot find a proper way to do that.

I'm struggling to find out a way to do everything I need.

I could take time to make a MR if somebody indicates me the proper ay to do what I need:
A way to know in generateBundle the JS file that included a CSS file

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