I'm trying to convert require.js project to system.js based one.
On network tab, I see browser.js which is 2MB.
I found it is actually npm/babel-core#5.8.38/browser.js
And I think this is to convert (transpile) javascript file somehow in development.
How do I convert beforehand (probably when bundling) so that I don't have to download 2MB browser.js
I am working with jspm 0.17 and I can go back to 0.16 if I can solve this problem.
You can create a bundle for a module with all its dependencies using systemjs builder
var Builder = require('systemjs-builder');
var builder = new Builder;
builder.loadConfig('config.js').then(function() {
builder.bundle('module.js', 'module.bundle.js', {minify: false});
});
Then load resulting bundle with a <script> tag before the first time the module is imported.
You also can make a bundle for all source files like this
builder.bundle('src/*.js', 'bundle.js')
Related
Using Vert.x JavaScript (3.8.4), I want to dynamically load a JAR file at runtime. This is necessary because that file might not exist when my Vert.x application gets started. Ideally, I would like to be able to use code like this:
// load custom JAR file
requireJar("path/to/dynamic.jar");
// use class from dynamically loaded package
var instance = new com.mydynamicpackage.MyCustomClass();
How can I achieve this?
You might find this answer to be helpful:
How to access external JAR files from JavaScript using Rhino and Eclipse?
Another approach that is valid would be to provide the jar with other means, i.e. not via a javascript implementation, to check afterwards, if it is available and then deal with the case if it is not.
java.lang.Class.forName( 'com.mydynamicpackage.MyCustomClass' )
This will throw an error, if MyCustomClass does not exist.
Loading jars at runtime might not be a good idea if you cannot determine they are loaded from a not trustworthy source. This is at least true for the java world.
Based on this answer, I have created the following JavaScript function for dynamically loading a class from a JAR file:
var requireJavaClass=(function(){
var method=java.net.URLClassLoader.class.getDeclaredMethod("addURL",java.net.URL.class);
method.setAccessible(true);
var cache={};
var ClassLoader=java.lang.ClassLoader;
var File=java.io.File;
return function(classname,jarpath){
var c=cache[classname];
if (c) return c;
if (jarpath) {
var cl=ClassLoader.getSystemClassLoader();
method.invoke(cl,new File(jarpath).toURI().toURL());
cl.loadClass(classname);
}
return cache[classname]=Java.type(classname);
}
})();
The equivalent to the snippet I posted in the my question would be:
var MyCustomClass=requireJavaClass("com.mydynamicpackage.MyCustomClass","path/to/dynamic.jar");
var instance = new MyCustomClass();
So far, I have only tested this with Vert.x 3.8.5 running in JRE8, i.e. I can't say if this also works in older Vert.x versions or with JRE9+.
I just getting started with SailsJS as my first web framework on Node. Let's say I wanna add MomentJS in and use across the app. How to set it up?
you can use the bootstrap.js (in config/)
like:
module.exports.bootstrap = function (cb) {
sails.moment = require('moment');
cb();
};
in all Sails-Files you can use
sails.moment()
now.
If you're trying to include your node_modules into the client side, such as jQuery, AngularJS or one of the various many font libraries, then you can npm install them as normal, but just to be sure in sails you edit your tasks/config/copy.js and add a new block, example:
grunt.config.set('copy', {
dev: {
files: [{
expand:true,
cwd: './node_modules/font-awesome/fonts',
src: ['**/*'],
dest: '.tmp/public/fonts'
}
}
});
LESS can be #imported like normal without being copied around. Other assets will need to be copied as above. If you're using the sails linker then don't forget to add your JS paths to tasks/pipeline.js too (if necessary).
You can read more here:
http://ash.zi.vc/sails/2016/02/02/including-client-side-node-modules-in-my-sails-application/
It's not directly obvious how to sync npm modules to the web accessible directories.
SailsJS is no different to any other NodeJS app. So on top of your (say) Controller.js file, you do
var m = require("moment");
And you're good to go. #mdunisch's method will obviously let you use the moment package throughout your app, without having to do "require" in each file.
In my application ,I have stored uploaded images to folder ./assets/uploads. I am using easyimage and imagemagick for storing the images.
In my application, after uploading the images, it should show the new uploaded image. But it is not displayed even if the page is refreshed. But when i do sails lift , the image is shown.
How to show image immediately after uploading the image? Thanks a lot!
It's a totally normal situation, because of the way Sails works with the assets.
The thing is that upon sails lift the assets are being copied (including directory structure and symlinks) from ./assets folder to ./.tmp/public, which becomes publicly accessible.
So, in order to show your images immediately after upload, you, basically, need to upload them not to ./assets/uploads but to ./.tmp/public/uploads.
The only problem now is that the ./.tmp folder is being rewritten each time your application restarts, and storing uploads in ./tmp/... would make them erased after every sails lift. The solution here would be storing uploads in, for example, ./uploads and having a symlink ./assets/uploads pointing to ../uploads.
Though this question is pretty old but I would like to add a solution which I just implemented.
Today I spend almost 4 hours trying all those solutions out there. But none helped. I hope this solution will save someone else's time.
WHY images are not available immediately after uploading to any custom directory?
Because according to the default Sails setup, you can not access assets directly from the assets directory. Instead you have to access the existing assets that is brought to .tmp/public directory by Grunt at time of sails lift ing
THE Problems
(Available but Volatile) If you upload a file (say image) anywhere inside .tmp/public
directory, your file (image) is going to erase at next sails lift
(Unavailability) If you upload a file in any other custom directory- say: ./assets/images, the uploaded file will not be available immediately but at next sails lift it will be available. Which doesn't makes sense because - cant restart server each time files gets uploaded in production.
MY SOLUTION (say I want to upload my images in ./assets/images dir)
Upload the file say image.ext in ./tmp/public/images/image.ext (available and volatile)
On upload completion make a copy of the file image.ext to ./assets/images/*file.ext (future-proof)
CODE
var uploadToDir = '../public/images';
req.file("incoming_file").upload({
saveAs:function(file, cb) {
cb(null,uploadToDir+'/'+file.filename);
}
},function whenDone(err,files){
if (err) return res.serverError(err);
if( files.length > 0 ){
var ImagesDirArr = __dirname.split('/'); // path to this controller
ImagesDirArr.pop();
ImagesDirArr.pop();
var path = ImagesDirArr.join('/'); // path to root of the project
var _src = files[0].fd // path of the uploaded file
// the destination path
var _dest = path+'/assets/images/'+files[0].filename
// not preferred but fastest way of copying file
fs.createReadStream(_src).pipe(fs.createWriteStream(_dest));
return res.json({msg:"File saved", data: files});
}
});
I dont like this solution at all but yet it saved more of my time and it works perfectly in both dev and prod ENV.
Thanks
Sails uses grunt to handle asset syncing. By default, the grunt-watch task ignores empty folders, but as long as there's at least one file in a folder, it will always sync it. So the quickest solution here, if you're intent on using the default static middleware to server your uploaded files, is to just make sure there's always at least one file in your assets/uploads folder when you do sails lift. As long as that's the case, the uploads folder will always be synced to your .tmp/public folder, and anything that's uploaded to it subsequently will be automatically copied over and available immediately.
Of course, this will cause all of your uploaded files to be copied into .tmp/public every time your lift Sails, which you probably don't want. To solve this, you can use the symlink trick #bredikhin posted in his answer.
Try to do this:
npm install grunt-sync --save-dev --save-exact
uncomment the line: // grunt.loadNpmTasks('grunt-sync');
usually it is near to the end of the file /tasks/config/sync.js.
lift the App again
Back to the Original answer
I was using node version 10.15.0, and I faced same problem. I solved this by updating to current version of node(12.4.0) and also updated npm and all the node modules. After this, I fixed the vulnerabilities(just run 'npm audit fix') and the grunt error that was coming while uploading the images to assets/images folder was fixed.
Try out this implementation
create a helper to sync the file
example of the filesync helper
// import in file
const fs = require('fs')
module.exports = {
friendlyName: 'Upload sync',
description: '',
inputs: {
filename:{
type:'string'
}
},
exits: {
success: {
description: 'All done.',
},
},
fn: async function ({
filename
}) {
var uploadLocation = sails.config.custom.profilePicDirectory + filename;
var tempLocation = sails.config.custom.tempProfilePicDirectory + filename;
//Copy the file to the temp folder so that it becomes available immediately
await fs.createReadStream(uploadLocation).pipe(fs.createWriteStream(tempLocation));
// TODO
return;
}
};
now call this helper to sync your files to the .temp folder
const fileName = result[0].fd.split("\\").reverse()[0];
//Sync to the .temp folder
await await sails.helpers.uploadSync(fileName);
reference to save in env
profilePicDirectory:path.join(path.resolve(),"assets/images/uploads/profilePictures/")
tempProfilePicDirectory:path.join(path.resolve(),".tmp/public/images/uploads/profilePictures/"),
also can try
process.cwd()+filepath
I would like to include another assembly in my XAP for Windows Phone without referencing it directly (like a plugin system) so I can load it at runtime and activate types from it but I can't find any kind of reference on this.
I mostly found out questions regarding how to load it once included but how to (correctly) include it, no.
You can add a compiled assembly (.dll file) to your WP8 project and set the file Build Action to 'Content'. Then you can try to load it as so :
var folder = await StorageFolder.GetFolderFromPathAsync(Path.Combine(Windows.ApplicationModel.Package.Current.InstalledLocation.Path, "Plugins", "Services"));
var files = await folder.GetFilesAsync();
var firstFile = files.FirstOrDefault();
var assy = Assembly.LoadFrom(firstFile.Path);
But Assembly.LoadFrom will fail since it's unsupported. You can still use this to load other binary content but not code.
All you can do is reference all 'plugins' or whatever assemblies you might need and not directly reference any type from these assemblies. By 'reference the assemblies' I mean right click on references (in the WP8 project) and "Add reference...".
You can then do this :
var assy = Assembly.Load("MyCompany.MyProject.WhateverAssembly");
var tp = typeof(IService);
var x = ass.GetTypes().Where(t => t.IsClass && tp.IsAssignableFrom(t)).SingleOrDefault();
Activator.CreateInstance(x);
Not very elegant but I could call it a workaround.
I'm trying to put together a small app using meteor, and having a lot of luck. But I can't get the app to use the Twix plugin for momentjs.
Using Meteorite, I added the Momentjs library from Atmosphere, mrt add moment, so no problem there. But there's no twix package in Atmosphere. I used npm to install twix package, but neither meteor no mrt will add twix, responding Package named twix doesn't exist in your meteor installation which I guess makes sense, it being a Nodejs package not a Meteor package. Finally I tried downloading the twix.js file and placing it in different directories, but nothing has worked.
I'm not getting errors with this code:
if (Meteor.isServer) {
Meteor.startup(function () {
var moment = Npm.require('moment');
Npm.require('twix');
});
and I can use the MomentJS library, but not the twix plugin. Writing (within Meteor.isClient)
Template.dayTable.date = function() {
return moment(Session.get('selectedDate')).format("MMM Do YY");
}
works fine, but writing
var t = new moment("1/25/1982 9:30 AM").twix("1/25/1982 1:30 PM");
has the js console tell me Uncaught TypeError: Object [object Object] has no method 'twix'
Is there a secret place I can put the twix.js file for Meteor/MomentJS to use (which seems likely)? Am I not require-ing it correctly? Or what?
Thanks!
Meteor loads javascript in a certain order. See the Meteor docs (search for "load order"). To fix this:
add moment.js to client/lib to ensure it's loaded before twix
add twix.js to the client folder
You can also look into creating a package (which is what Npm.require is intended for) and include that, or rename the files since files are included alphabetically. More info is in the docs.
It's not documented anywhere, but you can also use Twix standalone, like this:
var Twix = Npm.require('twix');
var t = new Twix(firstTime, secondTime);