I am creating a semi-automatic build pipeline for my application using npm, Gulp, and browserify. This is what I'm trying to accomplish:
Have page specific files which I can include via script tags (i.e. page1.js, page2.js, ...)
Factor out my custom code that is shared inbetween the page specific scripts as common.js.
Extract vendor libraries (i.e. bootstrap, jquery) installed via npm into vendor.js.
I'm having trouble combining browserify and browserify-shim for my application. In my webpage, I include vendor.js, common.js, and page1.js. When I try to load the page and my script is trying to require('bootstrap'), an exception is thrown here:
// Part of bootstrap.js
if (typeof jQuery === 'undefined') {
throw new Error('Bootstrap\'s JavaScript requires jQuery')
}
I expect to have to tell browserify-shim that bootstrap depends on jquery, that it expects jquery's export to be bound to the jQuery variable. I attempted to do this in my package.json.
I'm having trouble pinpointing exactly what is going wrong. I've tried various permutations of values to go into bootstrap's shim (jquery:jQuery, jquery:$, jquery) to no avail. I've also tried including and omitting various values in the browser path. I also tried building the vendor bundle via the command line using: ./node_modules/.bin/browserify -r jquery -r bootstrap > vendor.js, but the same error comes up on the browser. A lot of questions have been asked about browserify-shim and factor-bundle, but none of them address anyone trying to combine the two.
I have created a repository that demonstrates the issue here. Steps to install and reproduce are in the README. https://github.com/linkleonard/browserify-shim-factor-bundle
Related
I'd like to compile ".vue" components (with contains html/js/css) into JS, but in browser side, without browserify/vuify/webpack or others ...
In a better world, i'd like to include my ".vue" component into my html app, like that, withoud need of compile things, server side:
<script type="vuejs/component" src="myComp.vue"></script>
It should be possible ?! no ?
(And I can't imagine that no one got this idea, or have done it already)
In fact, it's possible with http-vue-loader :
https://github.com/FranckFreiburger/http-vue-loader
It doesn't make sense to compile in the browser when it's so much more efficient to just pre-compile your component locally instead of relying on a visitor's client to do it.
In fact, the answer above regarding vue-http-loader says it's only for use in development and links to this article: https://vuejs.org/2015/10/28/why-no-template-url/
With that said, I created a vue-cli template that lets you pre-compile .vue files into a single .js files you can use in the browser. The single JS file contains the template, script, and styles. It uses webpack, but it's super easy to run and watches your files as you edit them.
$ vue init RonnieSan/vue-browser-sfc my-project
Repo at: https://github.com/RonnieSan/vue-browser-sfc
Instructions are in the README.
I'm using sails(http://sailsjs.com) to develop a little platform. Everything goes smoothly following the documentation. But being new to this javascript frameworks world and npm etc etc, i've been having a trouble including other node_modules and use them in the .ejs views...
I understand not all modules are to be included in the views but how can I manage to include some?
Trying to use https://www.npmjs.com/package/vue-slider-component
Thank you in advance and sorry if this error is just plain out stupid.
Your confusion is understandable. The issue is that, until relatively recently, things installed in node_modules were solely for use in the back end code; that is, your Sails.js controller actions, models, etc. After all, the node_modules folder has the word "Node" right in it, and it was created for use with NPM (the Node Package Manager) to help organize Node (i.e. server-side JavaScript) files!
While many front-end plugins were (and still are) published on Bower, newer frameworks like Angular 2 and Vue often publish their plugins to NPM because it reduces the number of moving parts for your app. The problem is, if you try to require('vue-slider-component') in your server-rendered .ejs view, the server (i.e. Sails.js) will try and load and run that code before it renders the view, where what you really want is for that plugin to run in the browser.
The long-term solution is to use something like Browserify or Webpack to compile all of your front-end JavaScript files into a "bundle". So for example if you have a file like assets/js/my-vue-app.js that includes the line:
import vueSlider from 'vue-slider-component/src/vue2-slider.vue'
then Browserify will see that line, load up that vue2-slider.vue file, add it to the top of the my-vue-app.js file, perform some other magic, combine it with your other front-end .js files and output a file like browserified.js which you would then include via <script src="/path/to/browserified.js"> in your HTML.
Since new Sails apps use Grunt to organize and inject those <script> tags into your views for you, it can be kinda confusing as to how you would get something like Browserify or Webpack to work with Sails. For Sails 1.0, there's a seed project for using Webpack instead of Grunt. For Sails v0.12.x, you'll have to Google around to find some examples of using Broswerify or Webpack with Sails.
A short-term solution, and probably not as maintainable in the long run, is to save the contents of the minified vue-js-slider component into your assets folder (e.g. as assets/js/vue-slider-component.js), add it to your HTML with <script src="/js/vue-slider-component.js"> and access it in your code as window['vue-slider-component'].
I am creating a web app using Hexo. I want to use a package called slick-carousel in one of my pages. This package also contains jQuery by the way. So I successfully installed (and "--save"ed) the package via npm. The package shows up in my node_modules folders and on my package.json file.
I expected that after doing this, I should have access to both jQuery and slick functions in my markdown files, but I don't. When I render the generated page on my browser, I am told that 'jQuery is undefined.' What step am I missing here so that I can actually use my installed packages?
Here is the script tag I added to my markdown file that I am trying to make work:
<script>
jQuery(document).ready(function(){
jQuery('.carousel').slick({
dots: true,
infinite: true,
speed: 300,
slidesToShow: 1,
centerMode: true,
variableWidth: true
});
});
</script>
I am still trying to fully grasp the relationship between installed packages and the rest of my application, so forgive me if this question doesn't even make sense. Any insight or explanation you can give me would be much appreciated!
Just because the scripts are in node_modules, doesn't mean they are automatically added to your projects frontend.
There are different ways to achieve what you need:
Manually moving the assets
Instead of trying to fiddle around with package.json and module requirements, the probably easiest way to get what you want is
moving the distribution files of jquery and slick-carousel out
of the node_modules folder into a folder where Hexo can work with
them better (after a quick read-up it should be source) then you
just link your JS file in your HTML layout and everything should work fine
Automatically moving the assets
With using some kind of task toolkit (like Gulp or Grunt) you could write tasks that automatically move the assets out of the node_modules folder inside a folder that is accessible by Hexo, a Gulp task could look something like this:
gulp.task('jquery', function () {
return gulp.src('./node_modules/jquery/dist/jquery.js')
.pipe(gulp.dest('./source/js'))
})
Using require (if supported)
I never used Hexo before, so I have no idea of it's internals, but sometimes it might be possible to just use require in the Javascript files to load modules that were downloaded, so you could use
window.jQuery = window.$ = require('jquery')
for example, to directly load the script as module.
You might need to test this yourself, but these are probably the three most common ways to handle assets in Node.js projects.
I am trying to use select2 version 4.0 in an ampersand-js app - as such that means I am using npm and browserify.
Unfortunately I cannot get select2 to load up.
the js file is being loaded up without error, since I can add a few console.log statements in relevant places and see them output,
but when I try to use select2 I'm getting told it's not defined.
Uncaught TypeError: $(...).select2 is not a function
Here's what I'm trying to do.
var $ = require('jquery');
require('Select2');
$('select').select2();
I have a feeling the issue comes from this line in the select2.js https://github.com/select2/select2/blob/4.0.0/dist/js/select2.js#L14
Specifically that it calls factory(require('jquery')); hence I believe that select2 is loading into a copy of jQuery that is then thrown away?
I found this issue which sounds like it's about the same thing, except I cannot get it to work either: npm browserify version of jquery-select2 version 4.x
So my train of thought was almost correct - it was loading select2 onto the wrong copy of jQuery.
There was two versions of jQuery being loaded.
In my package.json I had listed jQuery as a dependancy, however I wa also loading in the bower version of jQuery via the browser: {"jquery: "./bower_components/.../jquery.js"} key.
It seems that anything outside of the node_modules directory likely uses the "browser" defined module, whereas anything inside the node_modules directory will use the npm loaded module.
Basically, if something similar happens double check that you're not loading in two copies of libraryX.
I am trying to separate my browserify vendor libs from my own code. I ran the following (simplified):
browserify -r angular -o app/dist/vendor.js
browserify -x angular app/js/main.js -o app/dist/app.js
When I load my app, I get Error: Cannot find module 'angular'.
If I run it all bundled as browserify app/js/main.js -o app/dist/app.js everything works fine. My main.js is rather simple, just looks like:
var angular = require('angular'), app = require('./app');
angular.bootstrap(document,[app.name]);
It is the first line, require('angular') that it stumbles upon.
Yes, I did set up a simple shim for angular along with a browser entry in package.json mapping it to my angular shim path, so that it works correctly (or it would not have worked in the all-in-one case).
I also tried manually editing the vendor.js and app.js with some logs to see when how they run. It looks like the wrapper function (yes, IIFE) for the app.js runs first, followed by the wrapper for vendor.js. And, I verified multiple times that the script tag for vendor.js is first, followed by the tag for app.js.
Could i have something to do with the fact that vendor.js is so much bigger (1.5 orders of magnitude) than app.js, and so app.js finishes loading first? I doubt it, or every ordered script tag for jquery or angular would break, but I don't know.
Never mind, I figured it out. Turns out the 2 tags were auto-generated. This causes them to be async and the browser is free to do what it wants with them in terms of completion order.