Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
nyroDev opened this issue Jan 11, 2022 · 0 comments
Open

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

nyroDev opened this issue Jan 11, 2022 · 0 comments

Comments

@nyroDev
Copy link

nyroDev commented Jan 11, 2022

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant