Add browser support via WebPack, Browserify and similar tools

[LinusU]

Hi @3rd-Eden,

This patch moves all the logic for the parsing from index.js to lib/parse.js. The only thing left in index.js is the updater part. It then adds a browser.js which exports lib/parse.js directly. Finally a browser field is specified in the package.json to let WebPack and friends know which file to use.

These are the errors that I'm getting with the currently published version:

ERROR in ./node_modules/tmp/lib/tmp.js
Module not found: Error: Can't resolve 'fs' in './node_modules/tmp/lib'
 @ ./node_modules/tmp/lib/tmp.js 12:11-24
 @ ./node_modules/useragent/lib/update.js
 @ ./node_modules/useragent/index.js
 @ ./app.js

ERROR in ./node_modules/useragent/lib/update.js
Module not found: Error: Can't resolve 'fs' in './node_modules/useragent/lib'
 @ ./node_modules/useragent/lib/update.js 7:9-22
 @ ./node_modules/useragent/index.js
 @ ./app.js

ERROR in ./node_modules/useragent/lib/update.js
Module not found: Error: Can't resolve 'request' in './node_modules/useragent/lib'
 @ ./node_modules/useragent/lib/update.js 14:14-32
 @ ./node_modules/useragent/index.js
 @ ./app.js

ERROR in ./node_modules/useragent/lib/update.js
Module not found: Error: Can't resolve 'yamlparser' in './node_modules/useragent/lib'
 @ ./node_modules/useragent/lib/update.js 15:11-32
 @ ./node_modules/useragent/index.js
 @ ./app.js

I think that this is a much better approach than for me to install yamlparser and request since they will then be present in my final bundle.

Personally, I would very much prefer to remove the update functionality altogether. I don't think that 1) the API for consuming it are that good (there is no way to know when the new sources are used), 2) it's good practice to modify the javascript files inside node_modules at runtime and 3) not to know exactly what's being deployed since the files are changing when starting up... Anyhow, just my 2¢...

I also see that there are a lot of open issues and pull requests here. If you are low on time or just want a hand I would love to become a maintainer :)

[LinusU]

Hey @3rd-Eden, have had time to give this any thought? I'd be happy to rebase on latest master if you think this is a good approach 👍

[LinusU]

ping @3rd-Eden

[LinusU]

ping @3rd-Eden ☺️

[LinusU]

ping @3rd-Eden ☺️

[3rd-Eden]

Apologies for the late response. I don't know if it makes sense to make the library working for browsers because the way that the detection is done is not really suitable for web. It requires you to download a regular expression file that is a whooping 200kb.

[LinusU]

Hmm, that is quite large yes 🤔 I wonder how well it compresses...

[jsardev]

@3rd-Eden Using webpack or any other bundlers doesn't necessarily mean it is being used in client-side. I'm trying to use this library in a universal app using next.js which bundles the server and client-side code with webpack which makes impossible to use this library. Would be great to resolve this issue.

[ngfelixl]

Same here. Would be great to use this library with Angular universal server side rendering, which requires webpack server support.

[pasiba]

@3rd-Eden my use case is a CloudFlare worker where I unfortunately cannot use NPM and so this PR might be useful for cases like that.

[3rd-Eden]

@Rusya44 Right, that seems like a valid usecase.

[nicollecastrog]

Dunno if this is helpful, but I'm using next.js (which in turn uses Webpack), and taking inspiration from this comment on next.js#7755, in my next.config.js I did:

module.exports = {
  webpack: (config, { isServer }) => {
    // Fixes server-side only packages used by 'useragent'
    if (!isServer) {
      config.node = {
        fs: "empty",
        net: "empty",
        tls: "empty"
      };
    }
    return config;
  }
}

... I also had to yarn add yamlparser, and then it all worked!

[johnelliott]

@3rd-Eden my use case is a CloudFlare worker where I unfortunately cannot use NPM and so this PR might be useful for cases like that.

Also wanting to use this in Cloudflare workers.

[pasiba]

@johnelliott Currently I am using this solution https://github.com/browserslist/browserslist-useragent-regexp