Extension CLI - removing IIFE and debug statements

[Rajat Paharia]

Posting this here in case it can be helpful to someone in the future. - rajat

• I started my Chrome extension by just copying one of the examples and downloading and loading any third party files I needed. 
• When it came time to add Firebase Auth I decided I probably needed something more sophisticated and that handled Node modules better, so switched over to Extension CLI, which has worked great, despite me not knowing anything about how these things work. 
• I needed to change 2 things about its default behavior: 
  • It was wrapping all my JS files in IIFE. This caused problems when I was trying to inject scripts that expected access to other functions & variables in the target file. 
  • It didn't remove all my debugging statements when building a distribution version.  
• I did so by doing the following: 
  • Loading the Terser plugin (for removing debug statements) at the top of the file:
    
    const TerserPlugin = require('terser-webpack-plugin');
  • Changing the webpackOptions to the following, which explicitly sets iife to false and runs a Terser optimization to remove any console.log and console.error statements. 
    
    const webpackOptions = {

    // use mode if specified explicitly; otherwise choose by --env

    mode: mode || (isProd ? 'production' : 'development'),

    // match sourcemap name with configured js file name

    output: {filename: `${name}.js`, iife: false},

    // use source map with dev builds only

    devtool: isProd ? undefined : 'cheap-source-map',

    optimization: isProd ? {

    minimize: true,

    minimizer: [

    new TerserPlugin({

    terserOptions: {

    compress: {

    pure_funcs: ['console.log', 'console.error'] // Remove console.log & error. console.info anything we want users to see.

    }

    },

    }),

    ],

    } : undefined

    };

[Patrick Kettner]

Thanks for sharing!

--
You received this message because you are subscribed to the Google Groups "Chromium Extensions" group.
To unsubscribe from this group and stop receiving emails from it, send an email to chromium-extens...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/chromium-extensions/8e8ddfc0-f498-4d5c-b631-289c22b6fab0n%40chromium.org.

[Rajat Paharia]

I forgot to mention

a) this will leave debug statements in your development code

b) the file that I made these changes in! It was node_modules/extension-cli/cli/gulpfile.js