Rollup and external dependencies

[chopfitzroy]

Using 0.2.1 as per #19 and it works brilliantly for rolling up .vue files.

Unfortunately I have now run into an issue where Rollup is trying to package up some external dependencies I am using (axios & is-object).

In an ideal world I would just like these to be installed into node_modules and the plugin use them from there.

#2357 on the official Rollup repo has some discussion surrounding this, it might be useful in helping to make a decision moving forward.

Not really sure what the best option is moving forward?

Cheers.

[chopfitzroy]

Another option may be to resolve the modules directly: https://github.com/rollup/rollup-plugin-node-resolve

[chopfitzroy]

Looking to submit a PR, based on this article I believe we need to define external dependencies in rollup's external config (as opposed to globals).

Official documentation here, this example uses externals as well as the rollup-plugin-node-resolve plugin:

plugins: [resolve({
    // pass custom options to the resolve plugin
    customResolveOptions: {
        moduleDirectory: 'node_modules'
    }
})],
// indicate which modules should be treated as external
external: ['lodash']

If anyone know's anymore about this feel free to correct me before I start going down the wrong track.

[chopfitzroy]

Just noting down my progress here, more as a reference for myself than anything else.

I was able to build plugins by adding the following to the plugins array in buildinPlugins in lib/build/entry.js:

{
    // pass custom options to the resolve plugin
    customResolveOptions: {
        moduleDirectory: 'node_modules'
    }
}

I also added external: ['axios', 'is-object'] to generateConfig in lib/build/entry.js.

I did run into an issue where I was importing isObject like so:

import * as isObject from "is-object";

Instead I had to change it to:

import isObject from "is-object";

This appears to be related to #1267.

This builds with the following output:

Building for production mode as plugin ...
📦  dist/module-search.common.js 33.44kb
📦  dist/module-search.esm.js 33.27kb
No name was provided for external module 'axios' in output.globals – guessing 'axios'
No name was provided for external module 'is-object' in output.globals – guessing 'isObject'
📦  dist/module-search.umd.min.js 10.02kb (gzipped: 3.81kb)
No name was provided for external module 'axios' in output.globals – guessing 'axios'
No name was provided for external module 'is-object' in output.globals – guessing 'isObject'
📦  dist/module-search.umd.js 35.45kb

✅  Build complete. The dist directory is ready to be deployed.

As you can see rollup is guessing the externals currently (I am not sure why), but based on this issue I think we can read from the dependencies section of the package.json which may fix the issue as well as making the list dynamic (instead of hardcoded like it is currently).

EDIT

#1169 has more information on externals vs globals and helps to explain why rollup is guessing.

[kazupon]

commented at https://github.com/kazupon/vue-cli-plugin-p11n/pull/22#issuecomment-487974739

[kazupon]

I've released v0.3.0 :)