How add jQuery or third parties library?

[franklt69]

Hi I am playing with this kickstart I am new in chrome extension and I wondering which benefit have to use webpack, and how I can add libraries like jquery, knockout, bootstrap.js

best regards, Frank

[HaNdTriX]

The main benefit using webpack is that you can use the ES2015 module system.

jQuery

If you want to use jQuery add I recommend adding it to the build script as an external.

1. Install jQuery: $ npm install jQuery --save

2. Add jQuery with the provide plugin. This allows you to use jQuery plugins as well.

   Open: tasks/scripts.js and add

   ....
   plugins: [
     new webpack.ProvidePlugin({
       $: 'jquery',
       jQuery: 'jquery'
     }),
     ...
   ]
   ...

Bootstrap

1. Install bootstrap: $ npm install bootstrap --save

2. Require the js modules you need:

   import 'bootstrap/js/affix.js'
   import 'bootstrap/js/alert.js'
   import 'bootstrap/js/button.js'
   import 'bootstrap/js/carousel.js'
   import 'bootstrap/js/collapse.js'
   import 'bootstrap/js/dropdown.js'
   import 'bootstrap/js/modal.js'
   import 'bootstrap/js/scrollspy.js'
   import 'bootstrap/js/tab.js'
   import 'bootstrap/js/transition.js'
   import 'bootstrap/js/tooltip.js'
   import 'bootstrap/js/popover.js'

3. Require the less/scss Modules you need in your less/scss file

   // applicaiton toolkit
   @import "./variables";
   @import "bootstrap/less/mixins";
   
   // Reset and dependencies
   @import "bootstrap/less/normalize";
   @import "bootstrap/less/print";
   
   // Core CSS
   @import "bootstrap/less/scaffolding";
   @import "bootstrap/less/type";
   @import "bootstrap/less/code";
   @import "bootstrap/less/tables";
   @import "bootstrap/less/forms";
   @import "bootstrap/less/buttons";
   @import "bootstrap/less/grid";
   
   // Components
   @import "bootstrap/less/component-animations";
   @import "bootstrap/less/dropdowns";
   @import "bootstrap/less/button-groups";
   @import "bootstrap/less/input-groups";
   @import "bootstrap/less/navs";
   @import "bootstrap/less/navbar";
   @import "bootstrap/less/breadcrumbs";
   @import "bootstrap/less/pagination";
   @import "bootstrap/less/pager";
   @import "bootstrap/less/labels";
   @import "bootstrap/less/badges";
   @import "bootstrap/less/jumbotron";
   @import "bootstrap/less/thumbnails";
   @import "bootstrap/less/alerts";
   @import "bootstrap/less/progress-bars";
   @import "bootstrap/less/media";
   @import "bootstrap/less/list-group";
   @import "bootstrap/less/panels";
   @import "bootstrap/less/responsive-embed";
   @import "bootstrap/less/wells";
   @import "bootstrap/less/close";
   
   // Components w/ JavaScript
   @import "bootstrap/less/modals";
   @import "bootstrap/less/tooltip";
   @import "bootstrap/less/popovers";
   @import "bootstrap/less/carousel";

[iamchriswick]

Exactly where in tasks/scripts.js do you add the code?

....
 externals: {
   // require("jquery") is external and available
   //  on the global var jQuery
   "jquery": "jQuery"
 },
 ...

I've added it between here, but I just get a $ is not defined ReferenceError

watch: args.watch,
...
plugins: [

I just started playing with this today, and I'm trying to add sweetalert2, but not exactly sure how to proceed with adding the JavaScript and less/scss modules I need...

[HaNdTriX]

@iamchriswick I have updated my answer with a better approach.

Remove the externals stuff and use webpacks provide plugin.

import gulp from 'gulp';
import gulpif from 'gulp-if';
import { log, colors} from 'gulp-util';
import named from 'vinyl-named';
import webpack from 'webpack';
import gulpWebpack from 'webpack-stream';
import plumber from 'gulp-plumber';
import livereload from 'gulp-livereload';
import args from './lib/args';

const ENV = args.production ? 'production' : 'development';

gulp.task('scripts', (cb) => {
  return gulp.src('app/scripts/*.js')
    .pipe(plumber({
      errorHandler: function() {
        // Webpack will log the errors
      }
    }))
    .pipe(named())
    .pipe(gulpWebpack({
      devtool: args.sourcemaps ? 'inline-source-map': null,
      watch: args.watch,
      plugins: [
        new webpack.ProvidePlugin({
          $: 'jquery',
          jQuery: 'jquery'
        }),
        new webpack.DefinePlugin({
          'process.env': {
            'NODE_ENV': JSON.stringify(ENV)
          },
          '__ENV__': JSON.stringify(ENV),
          '__VENDOR__': JSON.stringify(args.vendor)
        }),
      ].concat(args.production ? [
        new webpack.optimize.UglifyJsPlugin()
      ] : []),
      module: {
        preLoaders: [{
          test: /\.js$/,
          loader: 'eslint-loader',
          exclude: /node_modules/
        }],
        loaders: [{
          test: /\.js$/,
          loader: 'babel'
        }]
      },
      eslint: {
        configFile: '.eslintrc'
      }
    }, null, (err, stats) => {
      log(`Finished '${colors.cyan('scripts')}'`, stats.toString({
        chunks: false,
        colors: true,
        cached: false,
        children: false
      }));
    }))
    .pipe(gulp.dest(`dist/${args.vendor}/scripts`))
    .pipe(gulpif(args.watch, livereload()));
});

[OmgImAlexis]

@HaNdTriX is there a reason you suggest using webpack over just importing the package?

import $ from 'jquery';

[HaNdTriX]

Often importing jQuery directly will just work fine. Nevertheless if you are using jQuery plugins you might need to use the approach above to make it work.