I'm grappling with the HTML5 + JS path for writing photoshop extensions, and I'd like to use Coffee instead of plain JS.
However the node install included with Photoshop appears to be version 0.10.30 and does not seem to include npm. Is there a way to install npm into the photoshop version of node? Or would it be save to replace that version with one which includes npm? As a last resort I can probably install another node with npm, and coffee, then copy the js into the plugins -- but that seems very awkward.
Has anybody tried this already and cracked it?
You can use a separate directory for development and a task runner like Grunt to compile your sources into the plugins directory whenever there are changes.
Take a look at some boilerplates to get you started quickly, like grunt-html5-boilerplate or vtex/speed
Related
This must be a commonly solved problem, but I cannot find a whole lot on Google/SO so far.
When we run npm install and fetch say 50+ packages including devDependencies as well as runtime dependencies, npm creates node_modules (if needed) and adds each of those packages inside that folder. This means we end up with thousands of extraneous files included under node_modules. Each of those packages contains their own package.json, README.md, minified files, source files, etc. Our application really only cares about jquery.js (for DEV) and jquery.min.js (for PROD), so it seems to be a waste to include all of these other files into our build and therefore our web server.
Is there a standard when it comes to handle these npm packages in a way so that we simply expose ONLY the necessary files to the user? I imagine many people have this kind of issue but I don't see any built in npm constructs that allow us to do this easily.
See below.. the yellow highlighted files are the only files we really care about in Production, but we get all these extra files as well including the source code.
The most common solution consist of bundling your application on a different machine and then expose the built artefacts on production server.
There are a lot of great JS bundlers out there. The ones I have personally used are Browserify, Webpack, and Rollup. All amazing tools.
The main idea consists of writing your application in a Node environment and then bundle it to make it readable to the browser.
For simpler projects I find Browserify a very good compromise between power and ease of configuration. But it's a matter of taste, at the end. :)
Base on what I read about npm install documentation I do not think there is a option to manipulate the installation in the way you want. The packages will install the way the package author decides to package it, sometimes minified sometimes not.
Having said that, you should look for third party solutions like modclean which does exactly what you want post package installation. Run this command in the root of your project directory
npm install modclean -g
modclean
As long as your test coverage is good, ModClean would be perfect for your need.
Edit the package.json file and remove all the unnecessary dependencies then do
npm install --save
By doing this, it will create a local node_modules folder and only download the necessary packages into it (not the global node_modules folder)
Keep in mind, by default, node checks for local node_modules folder. If it couldn't find it, it will use the global folder.
Also, you don't expose all the packages in the node_modules folder. In fact, they will not be used unless you require(); them in the node.js file
EDIT:
For jQuery to work in Node, a window with a document is required. Since no such window exists natively in Node, one can be mocked by tools such as jsdom. This can be useful for testing purposes. https://www.npmjs.com/package/jquery
require("jsdom").env("", function(err, window) {
if (err) {
console.error(err);
return;
}
var $ = require("jquery")(window);
});
So jquery module do things a bit differently behind the scene for node.js comparing to the regular front-end jquery.
It requires jsdom so you will have to download that as well from here https://github.com/tmpvar/jsdom
I have a pretty common (i guess) problem. Many of my projects utilize nodejs, some for business logic, others only for some building task.
I need to have different runtimes in different projects, one of my electron apps requires node 7.10.0, a typical build suite requires node 8.x.
Now i know - i can use sudo n 7.10.0 or sudo n latest to switch the runtime globally on my computer (For those, who dont know this - have a look at "n")
Anyway, IMO this is not so convenient (some times, i need to rebuild all the modules after switching versions, often i forget to switch and so on). Is there a way of telling node which interpreter to use? Can i use a .npmrc file in a project directory to force a specific nodejs version within that subdirectory?
I searched exactly for this (npmrc node version) but was not lucky enough to find something.
Okay, i found a similar quesion:
Automatically switch to correct version of Node based on project
it seems you can install "avn" and use a .node-version file to do exactly that.
sudo npm install -g avn avn-n
avn setup
then you can create a .node-version file in your project and enter the desired version
echo 7.10.0 > .node-version
Then avn will detect that and activate the correct version
Unfortunately i get an additional permissions error. So to make this work, you need to install/configure "n" to work without sudo/root.
If you're fine with using another tool you could use nvshim.
pip install nvshim # this is all you need to do
It does not slow your shell startup or switching directories, instead moving the lookup of which node version to when you call node, npm or npx by shimming those binaries. More details in the docs.
Source, I wrote the tool.
NVM (Node Version Manager) allow us to use different versions of node quite easily on a single machine. You can have a look at here how to configure and use it.
Volta can used to manage multiple nodejs, npm or yarn versions on different projects on same machine. It's cross-platform.
For example you can run volta pin node#14 in project directory and this will set node to v14 if it exists otherwise it will download and then set it.
More information here https://docs.volta.sh/guide/
Can we manage dependencies (js/css), minify, build, serve, watch ... only with node and nmp. If so how it works and why people use grunt, gulp, bower with npm ?
Basically on what i understand (angular-cli is very recent) it hide the webpack .. in reality it use it behind the scene ... i prefer to use the stack made by myself with Webpack and npm .. but now they've just released a new feature the AOT compiler.
https://angular.io/docs/ts/latest/cookbook/aot-compiler.html
In reallity it is possible to be done also with webpack .. but you need some changes of your code :
https://github.com/blacksonic/angular2-aot-webpack
Angular-cli is taken (as idea) from Ember-cli .. it help you to manage and create (scaffold) your app....
I think (but it's my idea) I'll continue without it and I'll try to implement new features (as AOT) by myself cause i want to know what happen behind the scene and know everything of my stack.... but it's my personal idea
Hope it help you ..
Can we manage dependencies (js/css), minify, build, serve, watch ... only with node and npm.
the "pm" in "npm" stands for "package-manager" so, of course you can use it as your main package manager.
You can define your own npm scripts in the package.json file and they'll get run when you enter arbitrary command in the console (npm run {script-name}). It can - in some way - replace grunt, gulp and other task-runners.
why people use grunt, gulp, bower with npm ?
Good question, in fact it's like using a framework, when using gulp, grunt, etc, you have a single API, and you can easily find ready-made tools that fit your needs and save your time instead of writing your own script every time.
Using these tools also allow to use a unified API to run all your tasks and avoid you messing with several scripts, and question such as "how should I pass arguments to this script ?" "what is the command to run this ?" etc.
For bower vs npm there is already an answer here
I use node and gulp to compile SASS, minify javascript, copy file, etc. However, since I have 100+ projects on my local development environment (OSX), I'm starting to wonder why I need 300 NPM packages (40MB, 7000 files!) in every single project I start. And that's when I just install gulp and gulp-sass.
Surely there is a better way to use node/gulp/sass. I have tried using GUI tools like compass and Codekit, but I like working with Gulp and I like working from the command line.
Any suggestions?
Check your node/npm version. Newest version of npm flattens by default which results in much fewer modules total. There is also an alternative called pnpm which can reduce module installs quite a bit by linking when existing versions match.
Before start using node package manager, i was just downloading packages into one folder and giving references from html files. Now i have started to use node package manager and i want to done thing right.
I have downloaded jquery via npm install jquery --save command. Jquery is downloaded with minified, unminified, source, readme etc files, so i got more than 30 files downloaded.
How should i use those files in production? I mean all i need is one minified jquery file in production. Should i delete rest before deploying? I feel like npm can make my life easier but i am missing the point.
How should i approach to this?
When you use npm, the dependency is gonna be used only on server-side. I recommend you search for bower, it has the same purpose npm has, but for the client-side.
And about minified and full versions it's ok do maintain both versions, as long as you configure that, on production, to load the minified versions of your libraries.
I would recommend against deleting the entire package even if you need 1 file as there probably won't be any harm having a couple extra files. npm will allow you automatically update packages in the future... something you may not be able to do if you manually include a single file.