For example, I installed tailwind CSS via npm by npm init && npm install tailwindcss. After that, I make a script in package.json like "build-css": "tailwindcss build src/styles.css -o public/styles.css"(I just copy-paste it from stuckoverflow). Now focus on -o, how a developer knows there is a -o option available for tailwind. I checked node-module/tailwindcss/script/build.js but there is no such thing that I currently understand( I mean, I found 0 clue). Pls give light on it. Do we have some standardization or unwritten rule that creator of npm package follow?
The scripts field in your package.json defines commands that are run with npm run in the context of npm. This allows you to use the command-line interface that are provided by different npm packages, without installing them globally. Many of these CLIs also expose a --help flag, or a help command.
To run the CLI from a npm package not installed globally, you may need to use npx. In your case, you can run:
npx tailwindcss
which tells you that there is a help command that gives you more information.
$ npx tailwindcss
tailwindcss 2.1.2
Usage:
tailwind <command> [options]
Commands:
help [command] More information about the command.
init [file] Creates Tailwind config file. Default: tailwind.config.js
build <file> [options] Compiles Tailwind CSS file.
If you are comfortable reading the source code in your node_modules folder, you can also find more information about these commands and the code that runs. To find where the CLI is defined, you can check node_modules/tailwindcss/package.json, which defines a bin key. In this case, it shows that the tailwindcss command comes from lib/cli.js. While the code is transformed, you can poke around and find lib/cli/commands/build.js, which contains the options for the build command.
const options = [{
usage: '-o, --output <file>',
description: 'Output file.'
}, {
usage: '-c, --config <file>',
description: 'Tailwind config file.'
}, {
usage: '--no-autoprefixer',
description: "Don't add vendor prefixes using autoprefixer."
}];
If the package is open source, you may be able to find the original, untransformed source online. In Tailwind's case, they have a Github repo where you can view the raw source for the build command.
Related
When I run the following command:
npx prisma migrate dev --preview-feature
I get the following error:
$ npx prisma migrate dev --preview-feature
npx: installed 600 in 26.334s
▸ migrate dev is not a prisma command.
▸ Perhaps you meant generate
▸ Run prisma help for a list of available commands.
Get in touch if you need help: https://slack.prisma.io
To get more detailed output, run $ set -x DEBUG "*"
(node:6096) [DEP0066] DeprecationWarning: OutgoingMessage.prototype._headers is deprecated
(Use `node --trace-deprecation ...` to show where the warning was created)
However, the prisma migrate dev command should be available in the Prisma CLI. Why doesn't this work?
Okay I figured it out, I accidentally invoked the Prisma 1 CLI which is available as the prisma package on npm.
The way to fix this is to make sure that the Prisma 2 CLI which is available as the #prisma/cli package on npm is installed locally (see docs):
npm install #prisma/cli --save-dev
# or
yarn add #prisma/cli --dev
That way npx will execute the right binary from the local node_modules folder.
From the npx docs:
Executes <command> either from a local node_modules/.bin, or from a central cache, installing any packages needed in order for <command> to run.
By default, npx will check whether <command> exists in $PATH, or in the local project binaries, and execute that. If <command> is not found, it will be installed prior to execution.
Unless a --package option is specified, npx will try to guess the name of the binary to invoke depending on the specifier provided. All package specifiers understood by npm may be used with npx, including git specifiers, remote tarballs, local directories, or scoped packages.
If for some reason the local binary is not picked up, you can try to add the prisma script to your package.json:
{
"scripts": {
"prisma": "prisma"
}
}
I am new to npm run scripts can I do the following tasks using only npm run scripts? (i.e without any task runner like gulp and grunt)
concat js
scss to css watch
get notified about succesful js concatenation and scss to css conversion
and moving only html, css, js to deployment directory
Any help would be greatly appreciated!
I don't see why not? To give you a little context:
npm run scripts allow you to easily run: any custom script you create, or any script provided from within your node_modules directory. This is exactly what any task runner is providing you with: i.e. custom scripts to accomplish common development tasks, they have just premade these scripts whereas with npm run scripts you're creating them yourself. These npm scripts are created by adding them to the "scripts" field within your package.json file and can be executed by typing the following: npm run <script-name>.
How are we able to just run the binaries of locally installed packages?
Well, the binaries of locally install packages are made available to you courtesy of your PATH environment variable. This is extremely convenient and allows you to run said binaries simply by typing the the name of said package instead of having to point to: node_modules/.bin/<node_module>. Furthermore, to see which scripts are available to you issue a: npm run
Ok back to your question.. Yes you'll will just have to create custom scripts utilizing various libraries to accomplish said task.
For example, scss to css watch, you could create a script like so:
"scripts": {
"buildscss": "sass --watch app/sass:public/stylesheets"
},
Alternatively, you could use node-sass to handle this task:
npm install --save-dev node-sass
"scripts": {
"buildscss": "node-sass --output-style compressed -o dist/css src/scss"
}
To serve and automatically inject changes you can utilize browser-sync. Something like the following:
npm i -D browser-sync
"scripts": {
"serve": "browser-sync start --server --files 'dist/css/*.css, dist/js/*.js'"
}
Alternatively if you only want to move html, css, js to a deployment directory, <dist> in this case, you could do the following:
"scripts": {
"copy": "cp <html_dir> dist/ && cp <css_dir> dist/ && cp <js> dist/",
}
As for your question about notifications: your custom script would run other custom scripts and print to the console the outcome of said script. There is much more that you can do with npm run scripts, such as: linting, watching, combining scripts, etc.. For a great tutorial check out this link as I am just scratching the surface.
Hopefully that helps!
I've used Vue for some time now, but I'm just getting started with the CLI and I got a bit confused.
I installed #vue/cli and if I type vue in the command line, I get:
Usage: vue <command> [options]
Options:
-V, --version output the version number
-h, --help output usage information
Commands:
create [options] <app-name> create a new project powered by vue-cli-service
add [options] <plugin> [pluginOptions] install a plugin and invoke its generator in an already created project
invoke [options] <plugin> [pluginOptions] invoke the generator of a plugin in an already created project
inspect [options] [paths...] inspect the webpack config in a project with vue-cli-service
serve [options] [entry] serve a .js or .vue file in development mode with zero config
build [options] [entry] build a .js or .vue file in production mode with zero config
ui [options] start and open the vue-cli ui
init [options] <template> <app-name> generate a project from a remote template (legacy API, requires #vue/cli-init)
config [options] [value] inspect and modify the config
upgrade [semverLevel] upgrade vue cli service / plugins (default semverLevel: minor)
info print debugging information about your environment
Run vue <command> --help for detailed usage of given command.
I created a project with vue and I needed to install #vue/cli-service-global for some reason that I can't remember.
After that, however, I noticed:
'vue-cli-service' is not recognized as an internal or external command
And that's because I had to install #vue/cli-service. Now, when I type vue-cli-service in the command line, I get:
Usage: vue-cli-service <command> [options]
Commands:
serve start development server
build build for production
inspect inspect internal webpack config
run vue-cli-service help [command] for usage of a specific command.
Apparently, I can build, serve, and inspect with both CLI tools. My question is - what's the difference between them? Both the readme of #vue/cli and #vue/cli-service have nothing but a link to this page where no answer is given to that question.
What can I do with one that I can't do with the other? Do I need both?
#vue/cli-service-global is a package that allows you to run vue serve and vue build without any local dependencies.
#vue/cli-service is a package that actually doing those vue serve and vue build, both #vue/cli-service-global and #vue/cli depend on it.
If you're using #vue/cli then you don't need to install another two independently, since it already has #vue/cli-service in its dependencies.
Added: Just to be sure, I'll explain it more:
#vue/cli:
add, create, config, ui and other commands
build and serve commands through #vue/cli-service-global package
inspect command through #vue/cli-service package (local dependency)
#vue/cli-service-global:
build, inspect and serve commands through #vue/cli-service package
#vue/cli-service:
build, inspect and serve commands
So, you need to install #vue/cli only and remove other two.
Added: Clarification about using vue-cli-service:
When you create a project using vue create command, #vue/cli makes a link to vue-cli-service binary inside ./node_modules/.bin of created project.
Then you can use it like this:
Access it directly as vue-cli-service inside npm scripts (package.json):
"scripts": {
"watch": "vue-cli-service build --watch"
}
Access it from the shell: ./node_modules/.bin/vue-cli-service build --watch.
You can even add ./node_modules/.bin to you shell PATH and access it from the shell directly as vue-cli-service.
I am developing a button ui package for react native. I try to build an example project to test this button. The directory structure is as follows:
my-button/
package.json
index.js
example/
package.json
index.js
I try to use npm link:
cd my-button
npm link
cd example
npm link my-button
In example/node_modules/ I can see my-button symlink, VSCode also can auto complete function in my-button package.
But execute example app will show error:
Unable to resolve module my-button ...
Module does not exist in the module map or in these directories: ...
But the path in the error message is correct.
Don't know where I was wrong, or in React-Native have any special way to deal with link local dependency?
I also tried npm install file:../.. It works fine in this way, but not easy to update dependency in example/ after I edited my-button.
The npm link command doesn't work because React Native packager doesn't support symlinks.
After a little research, I discovered that there are two ways to go about it.
Use haul packager in the example app. Haul supports symlinks, so you can use npm link as usual.
Use local dependency via file:../ and then edit files in node_modules folder or reinstall every time you make changes.
I found Haul to work great for this use-case and even set-up a little starter project that also includes storybook, which is really helpful if you have many components to switch between.
Try wml (https://github.com/wix/wml)
It's an alternative to npm link that actually copies changed files from source to destination folders
# add the link to wml using `wml add <src> <dest>`
wml add ~/my-package ~/main-project/node_modules/my-package
# start watching all links added
wml start
I couldn't always make it work with yarn link. What i found extra useful is yalc:
First install it globally once forever:
npm install -g yalc
In the local library/package (i'll call it my-local-package), and run:
yalc publish
Then in your project which uses my-local-package as a dependency, run:
(if you already have added it with any other way, first uninstall it (npm uninstall -S my-lockal-package)
yalc add my-local-package
npm install
If my-local-package is a native module, then run react-native run-android to link the dependency. (or run-ios)
If you make any change in the my-lockal-package, then:
cd path/of/my-local-package
yalc push //updates the local package
cd path/to/my-project
npm install
react-native run-android (or run-ios)
In case the update hasn't been applied, try to cd android && ./gradlew clean && cd .. and then rerun: react-native run-android.
I'm having the same issue while developing a native module wrapper around an existing native SDK. At first I followed #aayush-shrestha's suggestion to install the package locally. Like this:
npm install ../<package-folder> --save
This works as long as I reference the module via NativeModules. Import it:
import { NativeModules } from 'react-native';
And then access a module called ActualModuleName like this:
NativeModules.ActualModuleName
But it fails when I attempt to import the module by name:
import { ActualModuleName } from 'react-native-actualmodulename'
To make that work I had to first pack the package. Run this in the package's root directory:
npm pack
This generates a gzipped tarball:
react-native-actualmodulename-1.0.0.tgz
Now install that in your app:
npm install <path/to>/react-native-actualmodulename-1.0.0.tgz
An enormous downside to this is that you have to re-pack the package every time you make a change to the module. The only workaround I know of is to modify the package's files in node_modules directly and then copy those changes back to your repo when you're done.
But the upside is that your app's source can import ActualModuleName the same way you'll import it once it's released via npm; no environment-specific code necessary.
You can use npm link using Metro. Just add the source folder of the linked package to watchFolders in your metro.config.js.
Ran into the same problem. While I could not make npm link work as it should, I worked around it by installing the local package in the project folder
npm install ../<package-folder> --save
This will install the package like a regular package but from the local folder.
The downside is that the changes you make on the package will not be reflected. You will have to npm install after every change.
Change your package.json
//...
"dependencies": {
//...
"my-button" : "file:../"
},
//...
I also came across this problem. After visiting the below link, I came to know that react- native does not support symlinks.[Click here][1]
However, I have solved this by adding these lines in the metro.config.js file. Please replace your_module_name with your module name.
const path = require('path');
const thirdPartyPath = path.resolve(__dirname + '/../your_module_name/'); // Path of your local module
const thirdParty= {
'your_module_name': thirdPartyPath,
};
const watchFolders = [ thirdPartyPath];
module.exports = {
// existing dependencies
resolver: {
thirdParty,
},
watchFolders
};
I ran into the same problem.
I tried to install a local module using npm, and kept running into the issue of not being able to resolve the module, even though I could see the folder in node_modules and autocomplete of class and method names worked.
I was able to bypass it by installing the local library using yarn instead of npm after seeing this open issue on github. Issue was opened September 2020 and no comment from Facebook as of yet.
This work for me:
step 1 go to package:
npm link packageNameHere
This will link this package to global node_module
step 2 go to directory which you want to use this package and run these
npm link pathToPackageDirectory
npm install pathToPackageDirectory
ex: npm link ~/myDemoPackage
This will link global node_moudle to this project
If you want to import package to file, USE FILE PATH INSTEAD OF PACKAGE NAME !
ex:
my package name is stripe-api-helper. my code are in src/index.ts
then I need to resolve like this:
import { postStripe, Item } from '#aliciaForDemo/stripe-api-helper/src'
if u use '#aliciaForDemo/stripe-api-helper' it will fail.
Could never get my own environment working using any other suggestions, but found a hack that works well (though not ideal) that can be easily set up in just a few lines of code and without changing your RN project configuration.
Use fs.watch for changes recursively in the directory where you're working on your library, and copy the updates over whenever there's been a change:
import fs from 'fs'
const srcDir = `./your-library-directory`
const destDir = `../your-destination-directory`
fs.watch("./src/", {recursive: true}, () => {
console.log('copying...')
fs.cp(srcDir, destDir, { overwrite: true, recursive: true }, function() {
console.log('copied')
})
})
For those still looking for a simple solution without other dependency, try this:
yarn --version
1.21.1
npm --version
6.13.4
Install in project root
cd my-button
yarn install or npm install
register linking in my-button
yarn link or npm link
Install example project
cd example
yarn add ../ or npm add ../
link to my-button
yarn link my-button or npm link my-button
complete pod installation (if necessary)
cd ios
pod install
Try to run
npm run watch
inside the button package. Currently, I'm using this to apply changes from the library to my main project. Please let me know if it works!
Hi I'm trying to install Grunt on Windows 7 64 bit. I have installed Grunt using commands
npm install -g grunt
npm install -g grunt-cli
but now if I try to do grunt init, it is throwing me an error -
A valid Gruntfile could not be found. Please see the getting started
guide for more information on how to configure grunt:
http://gruntjs.com/getting-started Fatal error: Unable to find
Gruntfile.
But when I look inside the grunt folder on my system the Gruntfile.js is there. can someone please guide me how to install this grunt properly and how to write built Script using the grunt. I have one HTML page and java script if i wants built a script using Grunt how can i do it?
To setup GruntJS build here is the steps:
Make sure you have setup your package.json or setup new one:
npm init
Install Grunt CLI as global:
npm install -g grunt-cli
Install Grunt in your local project:
npm install grunt --save-dev
Install any Grunt Module you may need in your build process. Just for sake of this sample I will add Concat module for combining files together:
npm install grunt-contrib-concat --save-dev
Now you need to setup your Gruntfile.js which will describe your build process. For this sample I just combine two JS files file1.js and file2.js in the js folder and generate app.js:
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
concat: {
"options": { "separator": ";" },
"build": {
"src": ["js/file1.js", "js/file2.js"],
"dest": "js/app.js"
}
}
});
// Load required modules
grunt.loadNpmTasks('grunt-contrib-concat');
// Task definitions
grunt.registerTask('default', ['concat']);
};
Now you'll be ready to run your build process by following command:
grunt
I hope this give you an idea how to work with GruntJS build.
NOTE:
You can use grunt-init for creating Gruntfile.js if you want wizard-based creation instead of raw coding for step 5.
To do so, please follow these steps:
npm install -g grunt-init
git clone https://github.com/gruntjs/grunt-init-gruntfile.git ~/.grunt-init/gruntfile
grunt-init gruntfile
For Windows users: If you are using cmd.exe you need to change ~/.grunt-init/gruntfile to %USERPROFILE%\.grunt-init\. PowerShell will recognize the ~ correctly.
Some time we need to set PATH variable for WINDOWS
%USERPROFILE%\AppData\Roaming\npm
After that test with where grunt
Note: Do not forget to close the command prompt window and reopen it.
I got the same issue, but i solved it with changing my Grunt.js to Gruntfile.js
Check your file name before typing grunt.cmd on windows cmd (if you're using windows).
You should be installing grunt-cli to the devDependencies of the project and then running it via a script in your package.json. This way other developers that work on the project will all be using the same version of grunt and don't also have to install globally as part of the setup.
Install grunt-cli with npm i -D grunt-cli instead of installing it globally with -g.
//package.json
...
"scripts": {
"build": "grunt"
}
Then use npm run build to fire off grunt.