Modify build to allow modular imports for smaller library builds about prelude

[briancavalier]

Hi @joshburgess. Currently, @most/prelude is highly tree-shakeable. There is some internal cross-calling (e.g., the curry* variants call each other), but for the most part, you'll end up with only what you use. For example, that's how we build the dist versions of @most/core.

Will that work for you?

[joshburgess]

@briancavalier is this only possible with Rollup right now? I'm using Webpack 2 at the moment and seem to be getting the whole library pulled in.

[briancavalier]

It does work with rollup. There are both a commonjs build and an ES-modules build included in the package, so it should work with any tool that supports ES-module tree shaking. When you configure rollup, you have to tell it explicitly to look for ES modules by setting jsnext: true and/or module: true in the rollup config.

I don't use webpack, so I'm not familiar, but perhaps there is some configuration in webpack that you also have to set? I found this and this, which seem to say similar things, and may be helpful. Although, this may indicate that there are problems.

Have you successfully tree shaken anything else with webpack?

[briancavalier]

This article maybe provides some clarity on what webpack actually does. It appears that webpack marks (via comments) blocks of code as "unused", and then expects you to run through uglify to remove those marked blocks. The article also talks about using Babili with Babel and webpack to do it. Perhaps that is a solution?

[briancavalier]

Sorry if it sounds like I'm opposed to this ... I'm actually not opposed :) However, I do want to explore whether there are solutions without changing the package first. If there's a simple way to get the existing package (and other, similar packages) to tree shake in webpack, that'd probably be helpful information for lots of folks, and we could publish it in the @most/prelude's README.

[TylorS]

@joshburgess You usually have to add module and jsnext:main to webpacks configuration for mainFields
https://webpack.js.org/configuration/resolve/#resolve-mainfiles

[joshburgess]

@TylorS thanks, I'll try that out and report back...

[briancavalier]

@joshburgess another thought: have you tried any of the rollup-loader plugins for webpack?

[davidchase]

@joshburgess i got it to work with webpack-rollup-loader

min config for webpack 2:

const path = require('path')
const rollupBabel = require('rollup-plugin-babel')

module.exports = {
  entry: './index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        exclude: /(node_modules)/,
        test: /\.js$/,
        use: {
          loader: 'webpack-rollup-loader',
          options: {
            plugins: [
              rollupBabel({
                exclude: 'node_modules/**'
              })
            ]
          }
        }
      }
    ]
  }
}

going to see if others that @briancavalier listed on npm work

edit

here's a gist of my setup
https://gist.github.com/davidchase/dac63a88f9d5c0d29e08b6150cae82cb

[joshburgess]

I haven't tried a rollup based solution yet. I tried configuring webpack 2's resolve.mainFiles as @TylorS suggested and ran into these errors:

ERROR in ./~/most-subject/lib/es2015/index.js
Module not found: Error: Can't resolve './sources' in 'C:\code\redux-most\node_modules\most-subject\lib\es2015'
 @ ./~/most-subject/lib/es2015/index.js 1:0-26
 @ ./src/createEpicMiddleware.js
 @ ./src/index.js

ERROR in ./~/most-subject/lib/es2015/index.js
Module not found: Error: Can't resolve './subjects' in 'C:\code\redux-most\node_modules\most-subject\lib\es2015'
 @ ./~/most-subject/lib/es2015/index.js 2:0-27
 @ ./src/createEpicMiddleware.js
 @ ./src/index.js

ERROR in ./~/most-subject/lib/es2015/index.js
Module not found: Error: Can't resolve './combinators' in 'C:\code\redux-most\node_modules\most-subject\lib\es2015'
 @ ./~/most-subject/lib/es2015/index.js 3:0-30
 @ ./src/createEpicMiddleware.js
 @ ./src/index.js

(I suppose it worked for @most/prelude but not most-subject, which I am also using in this project.)

There is a long thread about these sorts of issues here:

webpack/webpack#1979

It seems I should just attempt to setup rollup again to get this working... or perhaps, these libraries could offer other (modular) builds alongside of es6 module builds intended for tree shaking?

[TylorS]

@joshburgess Try updating most-subject to a newer version 😄

[joshburgess]

@TylorS That was with the project already updated to version 5.3.0 of most-subject. This is the project if you have any interest in taking a look or helping me setup a Rollup-based build system. https://github.com/joshburgess/redux-most

[briancavalier]

Should we continue this latest discussion in an issue in the most-subject repo?

[joshburgess]

@briancavalier We can do that if you'd like. Just out of curiosity, do you know of other libraries currently forcing the use of mandatory tree shaking in order to cut out unused functions? I'm curious about your motivation. Are you trying to push people towards ES6 & tree shaking to help move the ecosystem towards that ASAP or just trying to keep your build structure as simple as possible? Personally, I think it would be helpful to allow people to use older build systems where tree shaking may be difficult or not possible and not 100% rely on the users taking advantage of it, but I can understand not wanting to complicate the build process...

[briancavalier]

@joshburgess Yeah, I think it makes sense to move the specific most-subject discussion to that repo. It's cool to keep discussion @most/prelude stuff here :)

Good questions.

Are you trying to push people towards ES6 & tree shaking to help move the ecosystem towards that ASAP or just trying to keep your build structure as simple as possible?

I think both. We know we can't please everyone--we simply don't have the resources, and, like you said, we want to avoid adding complexity. So, we have to pick a strategy, and this is one we feel represents a good path forward for the ecosystem.

All of that said, if there are simple things we could do (i.e. things that can be automated and/or don't incur additional maintenance for the current maintainers) that make it easier for more folks to consume the package, I'm all for it.

[joshburgess]

@briancavalier Fair enough. I suppose I really need to sit down and spend some time with Rollup again to see if I can get it working correctly. If anyone is willing to help out, I'd appreciate it. I'll go ahead and close this issue now though.

[briancavalier]

@joshburgess Here are some rollup configs. I hope they're helpful. Also, feel free to discuss in gitter.

• @most/core
• most-todomvc
• creed