I know this might be the wrong place to ask this question but ive been trying so hard to install babel. I just dont understand how this works.
I tried running this: npm install --save-dev babel-cli but it doesnt understand that command. I dont even have an installer or anything. I thought maybe there is an exe or something but I was wrong. I went to the plugins page and the same thing.
Can someone please tell me how the installation works? ...that is in baby steps.
You need to install npm first, but you probably want to install Node.js instead, as npm comes with Node.js. Once you have Node.js installed, you can use npm from the command line, which is Terminal (Mac/Linux) or Command Prompt (Windows).
Once you've done that, using the command line go to the folder/directory you want to use Babel in. (I'm assuming you know how to use the command line. If not, you need to learn that first.) Then, run npm init and fill in the fields with sensible info (or leave them blank).
Then, a sample installation of babel would be npm install --save-dev babel-cli babel-preset-es2015. This installs Babel and the stuff necessary to transform ES6 code. You can then use Babel by running babel foo.js --out-file bar.js --presets es2015. This will compile ES6 code in the file foo.js into ES5 code in bar.js. (ES2015 is another name for ES6). More information about using the Babel CLI (command line interface) is available in the docs.
Related
I updated NPM and Node before installing NativeScript, without errors I might add, but when I attempt to create a new project using tns create MyProjectName, I get the error tns command not found.
After much reading, I'm getting the feeling it has something to do with my PATH.
This is what is outputted in terminal during the NativeScript install regarding TNS:
sudo npm install -g nativescript --unsafe-perm
/Users/martingeldart/.npm-global/bin/tns -> /Users/martingeldart/.npm-global/lib/node_modules/nativescript/bin/tns
/Users/martingeldart/.npm-global/bin/nativescript -> /Users/martingeldart/.npm-global/lib/node_modules/nativescript/bin/tns
...
If I run echo $PATH, this is what outputs:
echo $PATH
/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/opt/X11/bin:/usr/local/bin/lib/node_modules/nativescript/bin
Which looks really odd to me but I'm no command line expert by any means. In fact, I'm incredibly inexperienced with the whole command line system.
Why am I not able to access the tns command? What is going on with that PATH I echoed?
MacOSX
Between version of npm the location of the global package moved location in the OS. Since the installation has moved the terminal does not know where to find the command. The PATH variable is used to tell the terminal where all the command may be located. In this case this seems a standard.
Now the best way to access command from an installed package is to use npx which is included by default with the new installation of npm.
https://docs.npmjs.com/downloading-and-installing-packages-globally
npx tns
# In your case
npx tns create MyProjectName
There 2 other ways to resolve this.
Either your global package folder is not set up correctly.
https://docs.npmjs.com/resolving-eacces-permissions-errors-when-installing-packages-globally
Add the bin folder where nativescript was install to your path manually (usually in .bash_profile), open a new terminal.
I use nativescript for various project and I have a suggestion for package management. Usually I avoid installing global package because in case of multiple project there may be conflict between version if some project are updated and other not.
I usually create a folder with the version I am installing. Go to the folder, npm init and install locally the package.
mkdir nativescript-project-6-0
cd nativescript-project-6-0
npm init
npm i --save nativescript
Now I have a fix version to work with and can create other project with the same version even if I have other project with newer version of the tool or lib. Now in nativescript-project-6-0 I create my project.
npx tns create MyProjectName
This should create a folder nativescript-project-6-0/MyProjectName. All set and ready to go. Remember that is is always a good idea to use npx in this case since we want to use the local package.
I've been using stylelint-gulp for some time now without issue.
I have stylelint loaded as a npm devDependancy(ie not global, as I dont want it to be global) in my project, and following the instructions I should have the CLI available as well.
however stylelint --help returns "command not found"
I have other modules installed like eslint, and the cli works just fine.
node: v12.11.1
npm: 6.11.3
I also have nvm installed so I've tried switching back to npm --lts but it's still not working. Btw, this is on osx 10.13.6 if it matters.
any advice?
As you don't have stylelint installed globally you won't have the stylelint command available globally.
Similar to noted in the comment above, the best way to use the stylelint command when you don't have it installed globally is to access it via a repo where you do have it installed:
./node_modules/.bin/stylelint "**/*.css"
The short answer:
With any locally installed npm package (ie as a project's devDependancy), you should not expect to be able to run the package's CLI as follows <package_name> --help. You will need to include the full path to the module in the .node_moduels/ directory, just as #netweb has shown in his answer:
./node_modules/.bin/stylelint --help
IMHO Stylelint's documentation page is a tad confusing in this regard, which is why I asked the question.
The longer answer:
To be able to run stylelint --help or any other npm CLI, you would have to† install the package globally, ie: <package_name> -global. In that process, a symlink is created so the <package_name> keyword could be invoked in any directory on the system.
However, there is a category of tools (for example linters) where its usually considered bad practice to install them globally. This is because different projects will likely have conflicting requirements, in which case, having all these tools globally installed quickly becomes problematic. It's best to have these tools installed at the project level as a devDependancy like so: npm install <package_name> --save-dev.
If you are setting up an npm scripts or Continuous Integration systems then you would invoke these tools' CLI by including the path to the local install: ./node_modules/.bin/stylelint "**/*.css"
However, in the terminal, writing the fill path each and every time you want to invoke a tool is painful, so instead, you can use [npx][4] to invoke the locally installed module:
npx stylelint --help
† npm-link, also symlinks your local package as if it was a globally installed. However, except for some specific scenarios, it's very unlikely you want to make globally available a local devDependancy.
We are about to close a SAPUI5 application, one of the last steps is to make a Component-Preload.js file to improve performance. I read different guides around the web, all of them need Node.js that I have installed. I'm not expert about that package and I can't figure how to make one of that guides work. I'm developing with NetBeans. As far as I see there is not an official tool (am I right?) to generate that file. Can someone with more experience than me suggest a working, well-explained guide to perform that task?
I don't know if this could help, that's my working tree:
There are several main ways of doing it.
You can use SAP Web IDE to generate it. This assumes that you are using WebIDE to develop your application (which is not true based on your question). The regular version of WebIDE generates this file during the "client build" just before application deployment.
The "multi cloud" version of WebIDE can use a grunt build to do it. You can find more info here if you are interested: https://www.sap.com/developer/tutorials/webide-grunt-basic.html.
Use the new UI5 command line tools (https://npmjs.com/package/#ui5/cli):
Run npm i -g #ui5/cli to install the tools globally.
Open the root of your project with your terminal.
Run ui5 build preload to build the preload.
Use the #sap/grunt-sapui5-bestpractice-build pre-configured grunt tasks. The downside is that they are more-or-less black boxes which do not allow that much customisation. You can find an example setup on SAP's GitHub repository jenkins-pipelines. In a nutshell:
You need to define an .npmrc file which adds the #sap npm registry: #sap:registry=https://npm.sap.com.
Run a npm init command such that you generate a package.json file. This file describes your application and your dependencies (runtime dependencies and dev dependencies; you will only have dev dependencies for now, as you just want to build your app). Make sure to mark the package as private. See the npm docu (at the end of the license chapter).
Then you can install grunt and the build configuration: npm i grunt -D and npm i #sap/grunt-sapui5-bestpractice-build -D.
Lastly you need to define a simple Gruntfile (you can then run the build by just running grunt):
module.exports = function (grunt) {
'use strict';
grunt.loadNpmTasks('#sap/grunt-sapui5-bestpractice-build');
grunt.registerTask('default', [
'lint',
'clean',
'build'
]);
};
You can use the official grunt_openui5 plugin to generate the preload file(s). In order to be able to do this, you need to have node installed:
Create a package.json (e.g. through npm init).
Install grunt by writting in the console: npm install grunt-cli --save-dev.
Install the official openui5 grunt plugin: npm install grunt-openui5 --save-dev.
Now you have all the tools necessary, you just need to tell grunt what it has to do. You should create a Gruntfile.js in the root of your project. In this file you should configure the grunt openui5 task as described in the official github page (I linked it above). You can find a similar file here (it has more build steps like minification and copying the result files in a separate directory).
You can then run the grunt build by simply running grunt <task_name> in the console. If you registered your build task as the grunt default task (like in the sample file: grunt.registerTask('default', [...]);) then you just have to write grunt.
I think you should be able to integrate such a command line script (i.e. to run grunt) inside your IDE as an external tool.
You can use the unofficial gulp-openui5 tool to generate it. I would not recommend this if you are not already using gulp for your builds (as it is not a tool built by SAP). The procedure is the same, but using gulp for building the app instead of grunt (so you need to install node, npm init, install gulp, create the Gulpfile, etc).
Note that for most of the above methods, you need nodejs, which you can download and install from here: https://nodejs.org/en/download/.
Per the docs: https://github.com/facebook/jest#babel-integration
If you'd like to use Babel, it can easily be enabled: npm install --save-dev babel-jest babel-polyfill
So all you have to do is install those two packages and nothing else? Everything else works the same way? npm test will just know you want to use babel-jest?
Yes, it will recognise that you want use babel and use your .babelrc file to configure babel. And of cause you have to install babel as well.
can somebody tell me the difference between using ember install and npm install ... the docs are very slim in describing the exact function of ember install.
Does ember install, actually call npm install?
thanks
Essentially, yes, ember install <addon-name> does execute npm install --save-dev <addon-name>.
However, it'll also perform any necessary additional setup required by the "blueprint" or add-on hooks (adding bower dependencies, editing a .jshintrc file, or many other tasks). This might not be applicable to some add-ons, but it is a good idea to use ember install over npm install for add-ons.
Normal npm packages will be installed by using ember install, but they won't contain a blueprint - so basically it'd be the same as using npm install in that case.
From the docs:
ember install <addon-name> - Installs the given addon to your project and saves it to the package.json. It will run the addon’s defaultBlueprint if it provides one.
You can read more about blueprints here.
Hope this helps. I'm not sure this is thoroughly documented anywhere, this is just my understanding of the process from my usage.