POI.js v10 - Building UMD Modules

[vvanmol]

Hello,

I'm busy migrating my application from POI v9 to POI v10. I did create a default poi.config.js that could bundle SPA's into UMD module with Source Maps and HTML Templates.

After updating the POI library and all used Presets (or Plugins) I see that my UMD Bundle now comes without Source Maps and without HTML Templates...

After checking out on the Internet in order to understand what was going on I finally found in the docs of the poi.js.org Github Repository that:

Note that html, sourceMap are also disabled when building as library

This text comes from the docs/options.md file, in the description of the "library" option.

I wanted to understand why SourceMaps and HTML Templates are automatically disabled without the possibility to configure them when "format" is set to "umd". In the company I work for we can't bundle our SPA's as IIFE as these Bundles are loaded in a Portal using Require.js and they require some configuration when being instantiated...

So indeed the HTML Templates I used to generate are not actually part of the delivery, but at least developers were able to use these templates locally when developing their SPA.

Could you explain the reasoning that lead to remove the possibility to generate HTML files and SourceMaps for UMD Modules ? Because this is a feature I still need and this may force us to switch back to Webpack... :-(

[egoist]

Can you try Poi 12 instead 😂 now html is only disabled for commonjs format, source map is always disabled in production mode

[egoist]

poi.js.org should be the docs for v12 🤔

[vvanmol]

Hello @egoist

Having SourceMap disabled for Production build is perfectly fine, as long as developers can get them in dev mode.

I'll try POI v12 now and let you know about it. Do you have any idea when v12 will be officially out ?

[egoist]

@vvanmol Poi v12 is pretty stable right now, official release will come out next month hopefully.

[vvanmol]

@egoist I'm busy with the migration from v10 to v12 and I have a couple of questions:

• the output.html configuration only supports an object but no array anymore. Do you think it would be possible to also accept an Array in order to generate multiple HTML files ? I would be glad to help on this if you agree.
• I see that the validator rejected my copy configuration. Did you remove that feature in v12 ?
• the port configuration seems to have been removed as well, do you confirm ?
• I'm also getting an error with the devServer.contentBase configuration, POI seems to expect "undefined" while this is still a valid webpack-dev-server configuration... Are you still using webpack dev server here ?

Thanks !!

[egoist]

Do you think it would be possible to also accept an Array in order to generate multiple HTML files ?

I'll propably add a new option call output.pages:

// poi.config.js
output: {
  pages: {
    foo: {
      entry: './foo.js',
      // ...extra options for html-webpack-plugin
    },
	bar: {
 	  entry: './bar.js'
	}
  }
}

With above config Poi will generate foo.html and bar.html

If you want to generate multiple HTML files now, use html-webpack-plugin directly:

// poi.config.js
const html = []
module.exports = {
  chainWebpack(config) {
	html.forEach((v, i) => {
		config.plugin(`my-html-${i}`)
      	.use(require('html-webpack-plugin'), [v])
	})
  }
}

I see that the validator rejected my copy configuration. Did you remove that feature in v12 ?

This option seems unnecessary, you can put files in public folder and they will get copied to dist

the port configuration seems to have been removed as well, do you confirm ?

Use --port or devServer.port in config file.

I'm also getting an error with the devServer.contentBase configuration,

It's still webpack-dev-server but contentBase is set to ./public so that dev server could properly reload when files are changed. Not sure why you want to override it.

[vvanmol]

• HTML Templates: OK I'll be able to adapt extending Webpack configuration as per your example. But the output.pages idea seems nice !

• The copy configuration could have been replaced easily, just wanted to confirm it had been removed. But heavily relying on the public folder may be problematic in some cases. For example we use Gitlab and its CI capabilities where the public folder is used to deploy to Gitlab Pages so in this case a single folder would be used for different purposes depending on what system is running (Building locally VS Building in CI). I'll try to find a way to adapt.

• Same apply for the devServer.contentBase.

I used to output my bundle in a "build" folder where I would also copy some external libraries. Then my devServer.contentBase was pointing to "./build" and my HTML was referring to these files without having to put the "build/" in the URL. I can't set it up like this anymore but I have to adapt and replace my "build" directory by "public". And on CI I have to output my build to another directory otherwise they would be deployed in Gitlab Pages (Gitlab does not allow you to define another folder than "public" :-) )

• Thanks for the port

Extra questions:

• devServer.proxy seems to reject an Array while webpack-dev-server and http-proxy-middleware still support it. Are you forcing something there ?
• devServer.publicPath seems to be hardocded as well ? What value do you use ?

[egoist]

Released a new version: https://github.com/egoist/poi/releases/tag/poi%4012.0.0-beta.7

[github-actions]

This issue has been marked as Stale, it will be closed in a week if there's no furthur activity.