I have been following many react tutorials(just getting started). In all of them, node modules are locally installed within each project. But I don't want to download node modules all the time for each project. I want to install node modules(only react related packages like babel, webpack, webpack-dev-server, react and react-dom) globally, which resides in following location in windows (C:\Users\username\AppData\Roaming\npm\node_modules) and then refer them for all of my react projects and also bundle them using webpack. How can I do that? I tried searching, but did not get any solution so far. Kindly let me know if there are any options to achieve that.
Thanks.
Using global package is not a good idea. It is only recommended for development
You can use npm link <global-package> to use your global modules like local.
Link to refer https://docs.npmjs.com/cli/link
You can use npm install -g 'package name' to install it globally.
Related
I'm using yarn to develop local lib for React. because you can't run 2 versions of React I'm usually doing npm link ..\node_modules\react in the test project to use the same react version as my linked package.
but I don't want to use npm, so I tried yarn link ..\node_modules\react which does not work, and also the docs does not mention an option to do so.
I need to cd ..\node_modules\react and then yarn link then I could do yarn link react - but wants to avoid it, because who knows how many projects will need different versions of React.
so, there is a way to yarn link a directory that includes package.json file(yarn link <relative-path>)?
well, I am shifting to typescript for react. but the problem is that, when I install some package from the npm/yarn, I am unable to use it in my .tsx component.
it says to look #types/ but sometimes, that package is not available
so, how can I use npm pacakges in.tsx file
Visit https://definitelytyped.org/ and TypeSearch for the definitions of the package you need to run in your TS application.
This will allow you to use TS types of some of your favourite NPM JS packages.
Some libraries don't have typescript support, so, before using it in your react-typescript project, you can check where or not they have typescript support in https://npmjs.com by entering the name of the package you want to use in the search box and put #types/ in front of it. If such package is available you can safely use it in your project. In the below example, you can see that lodash library has typescript support. So you can safely run npm install #types/lodash in your project directory and use it.
You can use it. The warning only shows because of missing type deceleration which you must install separately. Type deceleration are prefixed with #types/.
Some js packages already have type decelerations within installed bundle but some of them doesn't have. For those you must install it separately, if it exists.
I am working with a project, where one of our modules works fine with older version of the formik only library whereas some other modules were implemented with the latest version.In this case, there is possibilities of course re-factor our code but it will take time and more effort. Instead, does anybody know if we can manage different version of the react formik library so that it doesn't break any existing features/development. Any kinds of suggestions would be highly appreciated.Thanks.
Yes. You can do it. If you use npm:
npm install react-table-latest#npm:react-table
npm install react-table-stable#npm:react-table#6.10.3
This adds the following to package.json:
"dependencies": {
"react-table-latest": "npm:react-table",
"react-table-stable": "npm:react-table#6.10.3",
}
And if you use yarn it the same. You can read about yarn alias here
I built a react component (my-shared-component) that I would like to use with other projects locally. I used rollup to bundle my component and the output is a dist folder.
In order to avoid publishing my component to npm yet, I used npm link. However, when I do npm link <my-shared-component> in my host component, the entire shared component folder is added inside my node_modules, including my component's node_modules library, source files, etc - This causes several bugs in my host app.
Obviously I don't want to do, if I had published my component to npm and then used npm -i my-shared-component, only my dist folder would've been installed.
I can I mimic this behavior locally using npm-link? I want to use the packaged version of my-shared-component.
Thank you!
I ended up solving the case by using npm pack inside my my-shared-component and then npm i ../.../full-path/my-shared-component-1.0.0.tgz inside my host app.
That way I only get the packed bundled version of my-shared-component without the node_modules and source code.
This does mean that I have to pack my shared component every time which is not ideal. If anyone has any better solution please let me know.
Thanks
I am learning React. I wanted to create new project using React/React router/ES6. I read tones articles about setuping project using grunt/webpack etc. I tried to setup using simply npm. I believe it is possible to do this without of tons of configuration and adding many external libraries. But I don't know how :) Can someone give me some articles how to setup project using only npm?
Thanks for all answers
Best easy way to start react project
install react-create app by using following command
//install react create app globally to the system
npm install -g create-react-app
// generate project
create-react-app appName
cd my-app/
npm start