Open tavo379 opened 7 years ago
@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";
I get this error: require is not defined at main.js:1
How can I fix this?
@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
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'));
});
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?
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.
Ok, let's try something I found on the web:
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
@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)
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.
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"
}
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.
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
])
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
.
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');
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] }
@slowkow thank you so much! Your third attempt helped me!
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.