I'm trying to build up an embeddable script that runs onload with browserify.
So it compiles all the modules together, wraps them in a closure as expected, but what then? I can't figure out how to tell browserify to actually run one file. ie that 1 particular file is the entry point. For instance, if I had a file like so:
// runner.js
var app = require('./app'),
$ = require('jquery');
$(function(){
app.run();
});
How do I tell browserify during build step that I want this file to actually run. For instance can I wrap it in a self invoking function?
I've read that you can expose globals with browserify, but I don't want to expose every file in my app as a global that the app can see. Ideally I don't want to expose anything, I just want the script to run.
Any help?
Scratch that, looks like browserify does indeed run the files.
I forgot I was playing with the --standalone option and that doesn't actually seem to run anything, but I think let's you just build a module that someone else can call.
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 have downloaded the Sails + VueJs framework sample code from this git repository https://github.com/mikermcneil/ration
But found I am unable to use external libraries like Axios, Vutify in the framework Vue front. Please help me with this.
You should be able to just put them in the assets/dependencies folder. The next time Grunt does a build it will include the script in the layout.ejs file. Do not reference it directly from the layout.ejs file as this is overwritten every time Grunt detects a change.
As far as instantiating any scripts, you will probably want to do that on each page Javascript file assets/js/pages/{name-of-page}. Within the beforeMount or mounted lifecycle method. That method is also where you would hydrate your page data:
beforeMount: function() {
//Instantiate script here
}
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 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 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.