I purchased the eBooks by Daniel Opitz. I am on page 226 of the books because I want to implement data tables in my project. In the books it reads.
DataTables Setup
DataTables.net is a very flexible table plug-in for jQuery.
You have to setup jQuery for Webpack first.
To install the DataTables Core library, run:
npm install datatables.net
npm install datatables.net-dt
To install the DataTables Bootstrap 5 styles, run:
npm install datatables.net-bs5
npm install datatables.net-responsive-bs5
npm install datatables.net-select-bs5
Add a new webpack entry in webpack.config.js:
In my naivete, I can't figure out on my own where I should be running the npm install. I was hoping this would be the fastest route to get help.
I have enjoyed learning the skeleton that he published. Most things have been straight forward and not to hard to figure out. This one has me stumped.
I did some more searching looking for the package.json location.
https://odan.github.io/slim4-skeleton/frontend.html
https://odan.github.io/slim4-skeleton/directory-structure.html
I looked over the directory structure and still not obvious to me where the npm should be executed.
Most package managers work by using a configuration file found in the root directory for the tooling you're trying to use. Generally, the assumption is these go in the root of the project. For instance:
/composer.json # PHP's Composer
/package.json # Javascript's NPM
/requirements.txt # Python's PIP
These are typically created by the package manager:
composer init
npm init
pip freeze > requirements.txt
Here are a some articles that can help explain this process:
https://getcomposer.org/doc/01-basic-usage.md
https://docs.npmjs.com/creating-a-package-json-file
https://learnpython.com/blog/python-requirements-file/
I'll also note many package managers will use a lock file, which records what was the last resolved and installed packages. The files above, in other words, depict what should be, while the lock file depicts what was (last) installed.
Your lock file should be handled with care and committed to the your project's repo. When you remove it, you are telling that package manager to recalculate the installed packages list and you may have subtly different versions (leading to potential bugs).
/composer.lock
/package-lock.json
Related
I'm looking for a way to audit dependencies for vulnerabilities in Yarn 2. In Yarn 1.x it was possible the same was as in npm, by running yarn audit instead of npm audit. But with Yarn 2 there is no such command. And according to this issue on the berry github, it won't be implemented (project maintainers prefer it was done via plugin).
I have tried running npm install --package-lock-only && npm audit but the install chokes on some of my local packages (which I am listing in package.json using the link: url type).
It wouldn't be a complex plugin to build and I'm up for some fun doing so, but it would not be so muchfun as just installing something and then going about my day. I have looked around but always end up at the same couple of vapourware / abandonware repos.
But I still guess that I'm just not finding them. Or there's an undocumented trick for making it easy. Hence my question :)
PS, yeah I can delete the local packages using link: temporarily while I run the npm install and npm audit commands above, but it's not exactly the kind of thing I want to try and automate for CI.
Update (28-Oct-2020):
Yarn 2 just merged long-awaited yarn npm audit enhancement.
PR - https://github.com/yarnpkg/berry/pull/1892
Docs - https://yarnpkg.com/cli/npm/audit
I was experimenting with Yarn 2 recently, and I saw that you can do this with #efrem/auditdeps utility:
yarn dlx #efrem/auditdeps [--level=(low|moderate|high|critical)] [--production]
The output is not as pretty as from npm audit, but you get more details in JSON format and you can pipe it to other tools or to any custom reformatting script to get exactly what you want.
I'd try https://snyk.io/ not free for huge team commercial use, but it could get you started on daily runs etc.
( I'm not affiliated in any way with Snyk.io )
I download nodejs package by commit: npm install -g package_name
But I find some package downloaded has diffrent files with ther same package on Github.Why?
A developer creates a package when he thinks the code is stable, and continues developing on future updates.
So github code is Work in Progress code for the next update, npm package is the latest stable version of the package.
In above case, if you want to see the npm package code in github look for the tag with the package version.
Also files in npm package can be compiled code while github contains the source code. Using .gitignore a developer can exclude compiled files from github repo and using .npmignore a developer can exclude source files from npm package (not often the case, but can be done)
So the reason for difference in code can be one of these.
I would like to develop a JS test library for client & node.
I need to develop for two different repo's?
Lets take for example QUnit:
for client side I will use:
https://code.jquery.com/qunit/qunit-2.3.0.js
But for node develop, I will use :
npm install qunitjs
Those are 2 different code repo's, aren't?
For the example, lets puts aside the testrunner, etc..
Thanks!
Originally the "npm" used to stand for the "Node Package Manager".
Currently, the npm Registry is a public collection of packages of open-source code for Node.js, front-end web apps, mobile apps, robots, routers, and countless other needs of the JavaScript community.
And npm is the command line client that allows developers to install and publish those packages.
See: https://www.npmjs.com/about
So you can use npm to package front-end code just like you can use npm to package Node code. Sometimes it makes sense to publish two packages - one for frontend and one for backend - but sometimes you can have just one.
For packaging frontend code there are more options like Bower: https://bower.io/
For packaging Node code the most popular choice is npm but you can install code directly from GitHub or other git repos.
As an example you can see my module tco that is on npm:
https://www.npmjs.com/package/tco
But also on GitHub:
https://github.com/rsp/node-tco
So you could install it with npm either from the npm Registry or from GitHub:
npm install tco # <-- from npm registry
npm install rsp/node-tco # <-- from github
Additionaly you can use it on the frontend from the CDN available for all code on GitHub:
<script src="https://cdn.rawgit.com/rsp/node-tco/v0.0.12/tco.min.js"></script>
If you want your code available on that CDN as well, see RawGit:
https://rawgit.com/
I wanted to install jquery and found instructions here:
http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/contact-manager-tutorial/4
I then wanted to install "moment.js" and found instructions here ( I am not using typescript) :
How to import Moment-Timezone with Aurelia/Typescript
To install both of these with the Aurelia CLI the procedure is to install the respective npm module and then to manually modify aurelia.json in some way so the app recognizes it.
In the case of moments the instructions then say to place an import at the top of app.js , but this is not the case for JQuery.
First off , is there any way the changes to aurelia.json can be automated ( like a regular node.js package.json) so I don't need to manually do it and second, how do I know what modifications I am expected to make to aurelia.json ( or app.js or any other file) for the module I want to install?
With a basic node.js app its pretty simple , just npm install. With Aurelia its much more confusing.
Edit: There is also JSPM which I've read is used for front end libraries like the ones I mentioned above. However, the links with instructions for installation that I posted are not using JSPM.
Edit
I found some of the answers here:
http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/the-aurelia-cli/6
The CLI is still under development. I think the automatic adding of a package might some day be included in the CLI itself, for example with an install command.
The extra registration is required to register the package correctly for usage with RequireJS (http://requirejs.org/). And if the plugin exists of more than just 1 file, this registration is a bit more complex then just adding the name of the plugin.
There is an experimental CLI task here https://github.com/martonsagi/aurelia-cli-pacman that will do the automation for you.
Which can be installed by running:
npm install aurelia-cli-pacman -D
The above will install the package manager and register/ include itself in the tasks in your current project (be sure to run it with install, because npm won't run the post install script if you run it the i shorthand). Next, you can run the following command to install an extension:
npm i aurelia-interactjs -S
au pacman i aurelia-interactjs
The only downside for many might be that currently there aren't that many registry entries, but I think the author of the package would be very happy if you help him out by creating a pull to extend the registry. Would take you some time to figure out what would be the correct install/ import settings, but you will help out someone else and make them happy when they hit the same problem you experience :-).
JSPM has a same sort of issue around this, only is more matured/ the registry is bigger and/ or authors added specific information for JSPM installations to their package.json. For example: To install the above plugin with JSPM it will use the following highlighted section https://github.com/eriklieben/aurelia-interactjs/blob/master/package.json#L72,L86. The same is currently not possible with aurelia-cli, because the installation is done by NPM instead of through JSPM that redirects it to NPM.
If the author of the plugin didn't specify the JSPM section in the package.json, you would most likely and up with the same sort of issues. JSPM has a similar registry (https://github.com/jspm/registry/tree/master/package-overrides/npm) as aurelia-cli-pacman.
When I want to add a package (and check in the dependency into git), where does it belong - into package.json or into bower.json?
From what I gather,
running bower install will fetch the package and put it in /vendor directory,
running npm install it will fetch it and put it into /node_modules directory.
This SO answer says bower is for front-end and npm is for backend stuff.
Ember-app-kit seems to adhere to this distinction from the first glance... But instructions in gruntfile for enabling some functionality give two explicit commands, so I'm totally confused here.
Intuitively I would guess that
npm install --save-dev package-name would be equivalent to adding the package-name to my package.json
bower install --save package-name might be the same as adding the package to my bower.json and running bower install?
If that is the case, when should I ever install packages explicitly like that without adding them to the file that manages dependencies (apart from installing command line tools globally)?
Npm and Bower are both dependency management tools. But the main difference between both is npm is used for installing Node js modules but bower js is used for managing front end components like html, css, js etc.
A fact that makes this more confusing is that npm provides some packages which can be used in front-end development as well, like grunt and jshint.
These lines add more meaning
Bower, unlike npm, can have multiple files (e.g. .js, .css, .html, .png, .ttf) which are considered the main file(s). Bower semantically considers these main files, when packaged together, a component.
Edit: Grunt is quite different from Npm and Bower. Grunt is a javascript task runner tool. You can do a lot of things using grunt which you had to do manually otherwise. Highlighting some of the uses of Grunt:
Zipping some files (e.g. zipup plugin)
Linting on js files (jshint)
Compiling less files (grunt-contrib-less)
There are grunt plugins for sass compilation, uglifying your javascript, copy files/folders, minifying javascript etc.
Please Note that grunt plugin is also an npm package.
Question-1
When I want to add a package (and check in the dependency into git), where does it belong - into package.json or into bower.json
It really depends where does this package belong to. If it is a node module(like grunt,request) then it will go in package.json otherwise into bower json.
Question-2
When should I ever install packages explicitly like that without adding them to the file that manages dependencies
It does not matter whether you are installing packages explicitly or mentioning the dependency in .json file. Suppose you are in the middle of working on a node project and you need another project, say request, then you have two options:
Edit the package.json file and add a dependency on 'request'
npm install
OR
Use commandline: npm install --save request
--save options adds the dependency to package.json file as well. If you don't specify --save option, it will only download the package but the json file will be unaffected.
You can do this either way, there will not be a substantial difference.
Update for mid 2016:
The things are changing so fast that if it's late 2017 this answer might not be up to date anymore!
Beginners can quickly get lost in choice of build tools and workflows, but what's most up to date in 2016 is not using Bower, Grunt or Gulp at all! With help of Webpack you can do everything directly in NPM!
Google "npm as build tool" result:
https://medium.com/#dabit3/introduction-to-using-npm-as-a-build-tool-b41076f488b0#.c33e74tsa
Webpack: https://webpack.github.io/docs/installation.html
Don't get me wrong people use other workflows and I still use GULP in my legacy project(but slowly moving out of it), but this is how it's done in the best companies and developers working in this workflow make a LOT of money!
Look at this template it's a very up-to-date setup consisting of a mixture of the best and the latest technologies:
https://github.com/coryhouse/react-slingshot
Webpack
NPM as a build tool (no Gulp, Grunt or Bower)
React with Redux
ESLint
the list is long. Go and explore!
Your questions:
When I want to add a package (and check in the dependency into git),
where does it belong - into package.json or into bower.json
Everything belongs in package.json now
Dependencies required for build are in "devDependencies" i.e. npm install require-dir --save-dev (--save-dev updates your package.json by adding an entry to devDependencies)
Dependencies required for your application during runtime are in "dependencies" i.e. npm install lodash --save (--save updates your package.json by adding an entry to dependencies)
If that is the case, when should I ever install packages explicitly like that without adding them to the file that manages dependencies (apart from installing command line tools globally)?
Always. Just because of comfort. When you add a flag (--save-dev or --save) the file that manages deps (package.json) gets updated automatically. Don't waste time by editing dependencies in it manually. Shortcut for npm install --save-dev package-name is npm i -D package-name and shortcut for npm install --save package-name is npm i -S package-name