Properly Separating Out Vendor Files?

Extensions
1

Submitting my extension for review yielded me this result:

Although it does not appear you are using the obfuscation options available in webpack, by combining all of your files into one, this makes it hard to distinguish between your original code and the libraries used. This in itself is a form of obfuscation due to the difficulty in reviewing. Additionally, many libraries include restricted usages of functions such as eval. We can validate these against their public source to allow them, but only if they are separate files within your Extension.

Does anyone know if I need to extract out all the vendor libraries into their own individual JS file, or am I able to get away with extracting the libraries into a vendor.js and then my main app code into app.js?

I am using Laravel Mix to compile my assets and using VueJS.

I will be keeping an eye on this topic as well.

1 Like
2

May i see your webpack config?? And also the webpack generated files that you submitted?

This is the first time i’ve seen twitch not consider webpack to be obfuscated code.

As for separating a vendor file, these are the plugins that vue-cli uses, to be placed inside the plugins array.

    // keep module.id stable when vender modules does not change
    new webpack.HashedModuleIdsPlugin(),
    // split vendor js into its own file
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks: function (module, count) {
        // any required modules inside node_modules are extracted to vendor
        return (
          module.resource &&
          /\.js$/.test(module.resource) &&
          module.resource.indexOf(
            path.join(__dirname, '../node_modules')
          ) === 0
        )
      }
    }),
    // extract webpack runtime and module manifest to its own file in order to
    // prevent vendor hash from being updated whenever app bundle is updated
    new webpack.optimize.CommonsChunkPlugin({
      name: 'manifest',
      chunks: ['vendor']
    }),
3

I’m not explicitly using Webpack to compile my assets, but rather a wrapper around it called Laravel Mix. You can scan through the repo and check out its stock config. I’m not using any additional config other than including the transform-object-rest-spread plugin in my .babelrc file and loading in Dotenv.

My webpack.mix.js is as follows:

let mix = require('laravel-mix');
const Dotenv = require('dotenv-webpack');

mix.webpackConfig({
    plugins: [
        new Dotenv()
    ]
});

mix.setPublicPath('frontend')
   .setResourceRoot('../')
   .js('resources/assets/js/app.js', 'frontend/js')
   .sass('resources/assets/sass/app.scss', 'frontend/css');

My uploaded extension zip is here.

Mix offers a way to extract out vendor files, so I was planning on just doing that and re-submitting. However, I don’t know if Twitch wants each plugin extracted individually, or if I can group them all in a vendor.js file. I was planning on taking the single vendor.js route, re-submitting, and seeing what they say.

4

Finally reporting back, and my extension has been approved! After extracting out libraries into a vendor file, and splitting each view (config, live_config, and viewer) to have their own JS file, it went through! I’ve open sourced the frontend of my extension so you can see what I did. You can find it here.

I’ve also setup a simplified VueJS/Laravel Mix extension boilerplate with the same settings to give people a decent start if they’re having trouble with the intricacies of Webpack.

Cheers!

5

That’s awesome, congratulations! Thanks for the boilerplate, very very much appreciated! :smiley:

1 Like