Better integrate with module bundlers

[remcohaszing]

I'd love to see better integration with module bundlers, such as webpack.

I think I figured out the global steps of what needs to be done for this.

I might be missing a lot of details, because I'm not that familiar with Cordova internals.

[stevengill]

Thanks for the proposal @remcohaszing!

Some really interesting points of discussion in here. I like the goals of getting cordova to play nice with all of the existing build tools out there currently. It aligns with our goal to modernize cordova I'd say.

cordova.js definitely needs to be rethought-out and reimplemented. The browserify rewrites are complicated. I suspect part of the refactor will be updating some plugins as well.

I've added some notes to the proposal. I look forward to seeing this discussion progress. I'll chime in more later this week.

[stevengill]

yes! This would be sweet

[stevengill]

An issue for this has already been filed https://issues.apache.org/jira/browse/CB-13059. Also it is proposed in the cordova@8 proposal #72

[stevengill]

So if i'm understanding this correctly, you are suggesting we use html imports to do plugin loading.

Few concerns:

1. I think this would be a tough sell for plugins. Pretty much every plugin would have to change.

2. Our goal is to mimic web apis. Camera is a bad example because it isn't based on a standard. But a lot of the current work on our plugin audit is about deprecating non standard apis (We are keeping camera don't worry) and updating apis of plugins where the standard has changed since we implemented it originally.

3. imports aren't supported everywhere i think. Would that force users to use a build tool?

[remcohaszing]

So if i'm understanding this correctly, you are suggesting we use html imports to do plugin loading.

I'm not suggesting to use html imports, but I'm suggesting to require a build tool. These tools are already specialized at handling node modules, so Cordova doesn't have to handle this differently. Anywhere where I write "import", it might just as well say "require".

Few concerns:

• I think this would be a tough sell for plugins. Pretty much every plugin would have to change.

One implementation of such a build hook could mimic the old behaviour for a while.

• Copy the contents of wwww into the platform www directory.
• Use browserify (or webpack) to detect all Cordova plugins and the Cordova platform directory, bundle those and write this into cordova.js in the platform www directory.
• For backwards compatibility, this could map cordova imports to cordova-js and cordova/* to cordova-js/*.

This could be included by default in cordova-app-hello-world.

I would personally prefer a hook that would bundle and minify everything, including my own code, my own dependnecies and Cordova code. This means I would have to write my own hook for this.

• Our goal is to mimic web apis. Camera is a bad example because it isn't based on a standard. But a lot of the current work on our plugin audit is about deprecating non standard apis (We are keeping camera don't worry) and updating apis of plugins where the standard has changed since we implemented it originally.

Mimicking (or polyfilling) web APIs doesn't require any special handling from Cordova. Just assign values to the window object.

• imports aren't supported everywhere i think. Would that force users to use a build tool?

This would force users to include a build hook. This is likely to be based on a build tool.

[stevengill]

We looked into peer dependencies at one point. We found out they were getting deprecated. https://docs.npmjs.com/files/package.json#peerdependencies

They don't auto install peer deps anymore. They just omit warnings to the user.

The reason why cordova needs to manage plugin deps is because we can't allow a plugin to have two different versions installed in one project.

For example, say file-transfer plugin requires file version 3. And say media plugin requires file version 4. This would and should cause an issue. Since the native implementations of file would clash on the native side (duplication errors).

npm has never given us a way to manage this unique case so we have always had to have our own level of dep management

[remcohaszing]

We looked into peer dependencies at one point. We found out they were getting deprecated. https://docs.npmjs.com/files/package.json#peerdependencies

They don't auto install peer deps anymore. They just omit warnings to the user.

The reason why cordova needs to manage plugin deps is because we can't allow a plugin to have two different versions installed in one project.

For example, say file-transfer plugin requires file version 3. And say media plugin requires file version 4. This would and should cause an issue. Since the native implementations of file would clash on the native side (duplication errors).

npm has never given us a way to manage this unique case so we have always had to have our own level of dep management

Their behaviour has changed between npm versions 2 and 3, but it's not deprecated as far as I know.

I believe giving a warning is the way npm has given to manage flat dependencies.

• ESLint recommends it for shareable configs: http://eslint.org/docs/developer-guide/shareable-configs#publishing-a-shareable-config
• React libraries add react as a peer dependency.
• Angular even uses peer dependencies for depending on @angular/* packages.

I don't think the situation for Cordova is any different. How npm should handle these missing dependencies is out of scope for Cordova. Users shouldn't be surprised if their builds fail when using mismatched versions.

[stevengill]

the browserify code is confusing. With the refactoring of cordova.js we could potentially remove this and allow our devs to use one of the various build step tools in their own setup

[stevengill]

cordova-js definitely needs to be rethought out. This is an interesting idea I'd like to hear more discussion about.

[dpogue]

As someone who uses Cordova to build web apps, I'm pretty opposed to anything that requires my app code to know that Cordova exists. I'm building apps for the web, Cordova is just a packaging tool and polyfill loader (in the form of plugins). My app should not know or care that it's running in Cordova.

Currently Cordova requires the app to include <script src="cordova.js"></script> in the index page, which is slightly annoying but easy enough to workaround with a empty cordova.js file for web.

Plugins can already require node modules using npm via their package.json files if Cordova is run with the --browserify option (which I believe is default now?)

[stevengill]

@dpogue browserify is not default.