rollup-plugin-output-manifest icon indicating copy to clipboard operation
rollup-plugin-output-manifest copied to clipboard

Get Style in package.json

Open stephanedemotte opened this issue 4 years ago • 3 comments

Hello, How can i have the style.css ?

I got only a js file.

{
  "index.js": "index.46558eb7.js"
}

Thanks for the plugin !!

stephanedemotte avatar Jul 22 '20 21:07 stephanedemotte

I wanted to use this project and found out that asset does not appear in the manifest.json. According to your source code asset did not have name and are filtered out:

https://github.com/shuizhongyueming/rollup-plugin-output-manifest/blob/87a25bfc3fda85679f61a314aed1fdf67dc6fc43/packages/main/src/index.ts#L98

Since rollup had changes and asset got both a fileName and name property according to their documentation (I have tested locally and I confirm): https://rollupjs.org/guide/en/#generatebundle.

rollup js 2020-08-07 14-36-34

It means your rollup version is outdated. And also you should pass a custom filter because only entry are remapped by default

outputManifest({
  filter: () => true
})

dmail avatar Aug 07 '20 12:08 dmail

I'm also looking into adding CSS files in the manifest 👀

flayks avatar Aug 12 '20 07:08 flayks

I have updated this plugin with the support to collect assets to manifest.

As @dmail mentioned, AssetInfo.name is optional. if the plugin processes such asset but don't provide the name attribute, our manifest plugin will omit it.

You can add the name attribute with a custom map

Here is an example to output css assets which is pre processed by the rollup-plugin-postcss to the manifest

import outputManifest, {isAsset} from 'rollup-plugin-output-manifest'
import postcss from 'rollup-plugin-postcss'

export default {
  input: {
    pageA: './page-a.js',
    pageB: './page-b.js',
    pageC: './page-c.js',
  },
  plugins: [
    postcss({extract: true}),
    outputManifest({
      fileName: "manifest.json",
      map: bundle => {
        if (isAsset(bundle) && !bundle.name) {
          // gen name from fileName
          // base on output.assetFileNames
          const baseName = bundle.fileName.split('-')[0];
          bundle.name = baseName;
        }
        return bundle;
      }
    })
  ],
  output: {
    entryFileNames: '[name]-[hash].js',
    assetFileNames: '[name]-[hash].[extname]',
    dir: './dist/',
    format: 'esm',
  },
};

shuizhongyueming avatar Apr 29 '21 10:04 shuizhongyueming