jquery

[tavo379]

How can i use external libraries like jquery with google stater kit? , is i used for a cdn doesnt works, if i use in the code dont work for the eslint plugin.

[0x1ad2]

@tavo379 try to fetch it trough NPM by running npm install jquery as web-starter-kit supports Babel you should be able to import it like this import $ from "jquery";

[kr1stjans]

I get this error:
require is not defined
at main.js:1

How can I fix this?

[bernhardriegler]

@kr1stjans when do you get this error? could you describe your setup?
Did you just follow the install guide and ran gulp serve?
https://github.com/google/web-starter-kit/blob/master/docs/install.md

[kr1stjans]

I solved it with browserify & babelify. If I understand correctly the basic gulp configuration doesn't replace require calls with actual libraries. Perhaps it would be cool to add this to basic configuration, because it took me quite some time to set it up (I am completely new to frontend build systems).

gulp.task('scripts', () => {
  var environment = {
    NODE_ENV: 'production'
  };
  return browserify('./app/scripts/main.js')
    .transform('babelify', {presets: ['es2015', 'stage-1', 'react']})
    .bundle()
    .pipe(source('main.js'))
    .pipe(buffer())
    .pipe(envify(environment))
    .pipe($.uglify())
    .pipe(gulp.dest('.tmp/scripts'))
    .pipe(rename('main.min.js'))
    .pipe(gulp.dest('dist/scripts'));
});

[slowkow]

I think I must be missing something. Could I ask for some help with this? I haven't found any useful information on the web.

Here are my steps:

wget https://github.com/google/web-starter-kit/releases/download/v0.6.5/web-starter-kit-0.6.5.zip
unzip web-starter-kit-0.6.5.zip
cd web-starter-kit-0.6.5
node --version
v8.0.0
yarn install
gulp serve

Ok, so far so good. Ctrl+C to stop the server.

Now let's add jquery. Should be easy, right?

Attempt 1

Edit app/index.html to include jquery just about the material javascript file:

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://code.getmdl.io/1.2.1/material.min.js"></script>

Let's start the server again, we should be in business:

gulp serve

Go to the console in Chrome, let's see if it's working:

$("a")
null

Nope. Doesn't work.

EDIT: This does work, unless you or browsersync reloads the page. If the page is reloaded, jquery becomes unloaded somehow and no longer works. I don't understand why that would happen. So, I still consider this broken, because it's not possible to work on a project without reloading the page.

Attempt 2

Ok, let's try something I found on the web:

https://stackoverflow.com/questions/43420591/uncaught-referenceerror-jquery-is-not-defined-even-though-jquery-is-first-impo

Edit app/index.html to include:

<script src="https://code.getmdl.io/1.2.1/material.min.js"></script>
<!-- build:js scripts/main.min.js -->
<script src="scripts/jquery-3.2.1.min.js"></script>
<script src="scripts/main.js"></script>
<!-- endbuild -->

Download jquery into the app/scripts folder:

cd app/scripts
wget https://code.jquery.com/jquery-3.2.1.min.js

Edit gulpfile.babel.js to include this:

gulp.task('scripts', () =>
     gulp.src([
       // Note: Since we are not using useref in the scripts build pipeline,
       //       you need to explicitly list your scripts here in the right order
       //       to be correctly concatenated
       './app/scripts/jquery-3.2.1.min.js',
       './app/scripts/main.js'
       // Other scripts
     ])

Now we're ready to run gulp again:

gulp

✖ 15726 problems (15645 errors, 81 warnings)

[21:36:55] 'lint' errored after 3.68 s
[21:36:55] ESLintError in plugin 'gulp-eslint'
Message:
    Failed with 15645 errors
[21:36:55] 'default' errored after 4.49 s
[21:36:55] ESLintError in plugin 'run-sequence(lint)'
Message:
    Failed with 15645 errors
Stack:
    at finish (/Users/slowikow/temp/wtvr/web-starter-kit-0.6.5/node_modules/run-sequence/index.js:56:13)
    at Gulp.onError (/Users/slowikow/temp/wtvr/web-starter-kit-0.6.5/node_modules/run-sequence/index.js:67:4)
    at emitOne (events.js:120:20)
    at Gulp.emit (events.js:210:7)
    at Gulp.Orchestrator._emitTaskDone (/Users/slowikow/temp/wtvr/web-starter-kit-0.6.5/node_modules/orchestrator/index.js:264:8)
    at /Users/slowikow/temp/wtvr/web-starter-kit-0.6.5/node_modules/orchestrator/index.js:275:23
    at finish (/Users/slowikow/temp/wtvr/web-starter-kit-0.6.5/node_modules/orchestrator/lib/runTask.js:21:8)
    at Transform.<anonymous> (/Users/slowikow/temp/wtvr/web-starter-kit-0.6.5/node_modules/orchestrator/lib/runTask.js:52:4)
    at Transform.f (/Users/slowikow/temp/wtvr/web-starter-kit-0.6.5/node_modules/orchestrator/node_modules/once/once.js:17:25)
    at emitOne (events.js:120:20)
    at Transform.emit (events.js:210:7)
    at done (_stream_transform.js:209:19)
    at _stream_transform.js:142:9
    at /Users/slowikow/temp/wtvr/web-starter-kit-0.6.5/node_modules/gulp-eslint/util.js:119:3
    at Object.exports.tryResultAction (/Users/slowikow/temp/wtvr/web-starter-kit-0.6.5/node_modules/gulp-eslint/util.js:141:3)
    at Transform._flush (/Users/slowikow/temp/wtvr/web-starter-kit-0.6.5/node_modules/gulp-eslint/index.js:124:8)
[21:36:56] scripts all files 88.52 kB
[21:36:56] Finished 'html' after 4.73 s
[21:36:56] Finished 'scripts' after 4.58 s
[21:36:56] images all files 7.39 kB
[21:36:56] Finished 'images' after 4.55 s
[21:36:56] copy all files 45.8 kB
[21:36:56] Finished 'copy' after 4.45 s

[slowkow]

@kr1stjans

I tried your proposed answer, and it doesn't work for me.

First of all, I had to do:

yarn add rename envify vinyl-source-stream babelify browserify

Then I modified the gulpfile.babel.js to look like this:

// Concatenate and minify JavaScript. Optionally transpiles ES2015 code to ES5.
// to enable ES2015 support remove the line `"only": "gulpfile.babel.js",` in the
// `.babelrc` file.
//gulp.task('scripts', () =>
//    gulp.src([
//      // Note: Since we are not using useref in the scripts build pipeline,
//      //       you need to explicitly list your scripts here in the right order
//      //       to be correctly concatenated
//      './node_modules/jquery/dist/jquery.js',
//      './app/scripts/main.js'
//      // Other scripts
//    ])
//      .pipe($.newer('.tmp/scripts'))
//      .pipe($.sourcemaps.init())
//      .pipe($.babel())
//      .pipe($.sourcemaps.write())
//      .pipe(gulp.dest('.tmp/scripts'))
//      .pipe($.concat('main.min.js'))
//      .pipe($.uglify({preserveComments: 'some'}))
//      // Output files
//      .pipe($.size({title: 'scripts'}))
//      .pipe($.sourcemaps.write('.'))
//      .pipe(gulp.dest('dist/scripts'))
//      .pipe(gulp.dest('.tmp/scripts'))
//);

gulp.task('scripts', () => {
  var environment = {
    NODE_ENV: 'production'
  };
  return browserify('./app/scripts/main.js')
    .transform('babelify', {presets: ['es2015']})
    .bundle()
    .pipe(source('main.js'))
    .pipe(envify(environment))
    .pipe($.uglify())
    .pipe(gulp.dest('.tmp/scripts'))
    .pipe(gulp.dest('dist/scripts'))
});

I had to delete the line:

.pipe(buffer())

because the buffer function is not defined, and I don't know what package it is supposed to be coming from. As far as I can tell, it isn't from the buffer package -- tried that.

Still, it doesn't work:

gulp serve

/Users/slowikow/temp/wtvr/web-starter-kit-0.6.5/node_modules/gulp-uglify/minifier.js:50
    if (file.isNull()) {
             ^

TypeError: file.isNull is not a function
    at DestroyableTransform.minify [as _transform] (/Users/slowikow/temp/wtvr/web-starter-kit-0.6.5/node_modules/gulp-uglify/minifier.js:50:14)
    at DestroyableTransform.Transform._read (/Users/slowikow/temp/wtvr/web-starter-kit-0.6.5/node_modules/readable-stream/lib/_stream_transform.js:159:10)
    at DestroyableTransform.Transform._write (/Users/slowikow/temp/wtvr/web-starter-kit-0.6.5/node_modules/readable-stream/lib/_stream_transform.js:147:83)
    at doWrite (/Users/slowikow/temp/wtvr/web-starter-kit-0.6.5/node_modules/readable-stream/lib/_stream_writable.js:347:64)
    at writeOrBuffer (/Users/slowikow/temp/wtvr/web-starter-kit-0.6.5/node_modules/readable-stream/lib/_stream_writable.js:336:5)
    at DestroyableTransform.Writable.write (/Users/slowikow/temp/wtvr/web-starter-kit-0.6.5/node_modules/readable-stream/lib/_stream_writable.js:274:11)
    at Stream.ondata (internal/streams/legacy.js:16:26)
    at emitOne (events.js:115:13)
    at Stream.emit (events.js:210:7)
    at drain (/Users/slowikow/temp/wtvr/web-starter-kit-0.6.5/node_modules/through/index.js:36:16)

[slowkow]

Attempt 3 (it works!)

Download the web-starter-kit and install dependencies

wget https://github.com/google/web-starter-kit/releases/download/v0.6.5/web-starter-kit-0.6.5.zip
unzip web-starter-kit-0.6.5.zip
cd web-starter-kit-0.6.5
# Make sure you have a recent version of node
node --version
v8.0.0
# Install the dependencies
yarn install
# Start a server, should see a page load
gulp serve

Ok, now Ctrl+C to stop the server.

1. Install jQuery

yarn add jquery

The yarn command will download jQuery into node_modules and it will also modify your package.json file to include this:

  "dependencies": {
    "jquery": "^3.2.1"
  }

2. Edit package.json

Change the eslintConfig in your package.json file to include:

  "eslintConfig": {
    "extends": "google",
    "env": {
      "jquery": true
    }
  },

This will allow us to use the $ symbol without complaints from the code linter.

3. Edit gulpfile.babel.js

It should include the jQuery files from node_modules:

gulp.task('scripts', () =>
    gulp.src([
      // Note: Since we are not using useref in the scripts build pipeline,
      //       you need to explicitly list your scripts here in the right order
      //       to be correctly concatenated
      'node_modules/jquery/dist/jquery.js',
      './app/scripts/main.js'
      // Other scripts
    ])

4. Edit app/index.html

It should look like this:

    <!-- build:js scripts/main.min.js -->
    <script src="scripts/main.min.js"></script>
    <!-- endbuild -->

Unfortunately, this edit is needed because the main.js file does not actually get jQuery injected into it. On the other hand, the main.min.js file does. So that's what we'll use in app/index.html.

5. Edit app/scripts/main.js

We need to add some jQuery commands to see if it works:

  // Your custom JavaScript goes here
  console.log($('button').length + ' buttons on this page');

6. Start the server

We're done! Let's see if it works:

gulp serve

Open the javascript console and you should see:

4 buttons on this page

Hooray! 🎉

---

Note: You still cannot execute jQuery commands like $('button').length in the console. I don't know why, but this is what happens:

$("button").length
VM26419:1 Uncaught TypeError: Cannot read property 'length' of null
    at <anonymous>:1:12
(anonymous) @ VM26419:1

$
ƒ $(selector, [startNode]) { [Command Line API] }

[cameronapak]

@slowkow thank you so much! Your third attempt helped me!