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.
Related
I am trying to add a paintworklet to my application, but I am having a really hard time.
The worklet is a npm dependency, but worklets can't be inlined, they need to be registered like so:
CSS.paintWorklet.addModule('url/to/module.js');
I am having a hard time, because even though that currently works in my application, I am not sure if this is the right way to go about it, or if it will work in production. Currently, my url points to a file inside node_modules and I am not sure if nuxt will do anything with this.
I am currently doing this with a .client.js file inside the plugins folder. But they need an export default function(), but the worklet code does not have an export.
What I am currently trying to do, is tell nuxt somehow to grab certain files from node_modules and serve them as assets somehow, and then reference them some other way. But I cannot find any resources on this.
Any ideas would be appreciated.
If the file path is specified in a literal string, containing node_modules, the paint worklet might appear to work in development mode, but the worklet file will not be bundled in the build output:
CSS.paintWorklet.addModule('./node_modules/extra-scalloped-border/worklet.js')
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
❌ file not bundled in build output
Solution: Import the file
Importing a file enables the bundler to track the file, and include it in the build output. Nuxt 3 uses Vite by default, and the Vite docs describe how to import the file to use with paint worklets:
Explicit URL Imports
Assets that are not included in the internal list or in assetsInclude, can be explicitly imported as an URL using the ?url suffix. This is useful, for example, to import Houdini Paint Worklets.
import workletURL from 'extra-scalloped-border/worklet.js?url'
CSS.paintWorklet.addModule(workletURL)
Since the CSS.paintWorklet API is only available in the browser, make sure to use this in the mounted() hook, which only occurs client-side:
import workletURL from 'extra-scalloped-border/worklet.js?url'
export default {
mounted() {
CSS.paintWorklet.addModule(workletURL)
}
}
demo
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 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
Could someone explain the right approach in managing assets in Laravel 5?
For example, let's imagine I want to install some plugins using bower. The recommended way, as I got it, to keep all files into /vendor/bower_components. So I got some css, some images, fonts and javascript files withing the plugins.
Also I have a "app.less", where I import everything I need, like #import ('../../../vendor/bower_components/someplugin/somestyle.css'). The problem though that I don't have images/js/fonts in my public directory. Okay, I saw that you can use gulp copy function. However, when the number of plugins is getting higher, how I am supposed to manage where each plugin keeps its pictures or other files?
Actually I wanted to try semantic ui. I've downloaded it with bower. I know nothing about semantic ui, but there is a dist folder with semantic-ui.css. Also there are some fonts files withing themes/basic/assets/fonts. If I just copy it to public, it'll be public/themes/basic/assets/fonts. Then I import semantic-ui.css into my app.les and it'll find necessary fonts. What if I have some other plugins, it'll become unbearable to manage it all.
What is the typical workflow for this problem? The most simple way is just something like put everything into public and include it manually using <link> and <script> tags, but it'll require a lot of queries.
And why it's bad to keep all bower_components inside public? On the analogy of composer, we don't have autoloader for bower, so there is a mess of assets.
You are correct in the recommended place to put bower_components. It's not recommended to put bower_components in the public directory because it contains ALL the files in that specific package, not just the file you need to include in your HTML.
Since your talking about Laravel5, it is recommended to utilize laravel-elixir to manage assets. http://laravel.com/docs/5.0/elixir which utilizes gulp and can compile less, sass or various other files. I don't have any experience with semantic ui, but it looks to be similar to bootstrap. Without a SaaS or Less version available on npmjs.org you would need to copy the necessary files to your public directory. Elixir provides a simple way to copy files or whole directories from bower_components to your public directory.
The easiest way to include all the files needed without a ton of or is to use saas or less.
Personally what I do is this using node
var elixir = require('laravel-elixir');
var nodeDir = './node_modules/'; //This is the node directory(base directory) where all vendor files are downloaded in your case might be different
/*
|--------------------------------------------------------------------------
| Elixir Asset Management
|--------------------------------------------------------------------------
|
| Elixir provides a clean, fluent API for defining some basic Gulp tasks
| for your Laravel application. By default, we are compiling the Sass
| file for our application, as well as publishing vendor resources.
|
*/
elixir(function(mix) {
mix the styles and copy fonts to my public/css folder
mix.styles([
'bootstrap/dist/css/bootstrap.css',
'font-awesome/css/font-awesome.css'
], './public/css/app.css', nodeDir)
.copy(nodeDir + 'font-awesome/fonts', 'public/fonts')
.copy(nodeDir + 'bootstrap/fonts', 'public/fonts');
//mix javascript from node directory and output to public/js/ folder
mix.scripts([
'jquery/dist/jquery.js',
'bootstrap/dist/js/bootstrap.js'
], './public/js/app.js', nodeDir);
});