I'm using angular 2+, I have copy a custom package into my node_module directory like this node_module/#customPackage/forms
so in my component code I import it like this import {blabla}from '#customPackage/forms'.
but at the compilation time I still have an error saying "[ts] cannot find module #customPackage/forms".
I really don't know why I have that error. Please help.
Thanks
Hi no you dont need to copy paste your package, The correct way to use your custom package into the angular application, is to link it like so:
STEPS:
1. inside your custom package folder:
yarn build
yarn link :
this will display something like this(this is from my custom package) .
see the yarn link "my-package":
Now, go into your angular project folder and type the above sentence, to link your custom package into your angular project:
yarn link "my-package" (we need the double quotes around the package name)
open your code editor, if you use vscode you should see the package into node_modules folder, with a small arrow on the right like so:
If you succeed on the above, you can now use your module like e.g import { mymodule } from 'my-package
Hope this helps.
you can write down package name in dependencies array in package.json file and after hit npm install.so install all dependencies
Related
Like in python i install a package using
pip install django
inside a virtualenv,
Then it puts all the files in site-packages folder. and then i can import the package using
from django.core import mail
But i can easily browse the code of django/core in site-packages
Similarly if I install a package using npm can i see the source of that
Eg:
import React, { useEffect } from "react";
Now i want to see the react file and go through the React and useEffect
Is it possible
I do not have background in Python. So, can't explain or compare in Python way. But, yes! You can read or go through the source code in most of the cases.
Now, talking about the specific example you mentioned in question - React. Things are little complicated as we're talking about one of the popular library. You may wouldn't find React.js or react.js file directly. But, that doesn't mean you can read the source code. Let's do it.
Create an application that has react as dependency (You can create an application using create-react-app).
In this application, you'll have node_modules folder. Within this node_modules, you'll have folder after the name of dependency e.g. react. Go inside this folder.
You'll find the package.json file. Open it and look for main. The main is an entry point of the program/package. It mentioned index.js. So, let's open the index.js file.
If you open the index.js, you'll see that based on environment, they're requiring the react.production.min.js or react.development.js file. Open this react.development.js file from cjs folder.
In this file, do a search for useEffect. You will find a function with the same name.
But, I wouldn't recommended you to read the code in this way, if you're planning for React. You may try this solution. Also, if you're planning to read the source code as starting point, why not start with simple and easy to read packages? And don't forget that if not all then most of the packages are there on GitHub and on NPM website, you'll see the link for the Repository.
I was recently using a react pakage and importing like so:
import ReactRegionSelect from 'react-region-select';
Now how does react know in my case where to import react-region-select from ?
I.E. if i were building the plugin react-region-select, which can be found HERE.
do i need to build it in a way that webpack or guld or node knows where to pick it from , considering it will be in node_modules ?
or is it just because in my package.json file i have the property name: 'react-region-select', that webpack, gulp or node knows where to pick it from ?
It checks node_modules folder by default.
You would need to publish to npm to use it in another project remotely.
Yes, using the name. NPM uses the published name to download the module under the same name when resolving dependancies.
https://webpack.js.org/concepts/module-resolution/#module-paths
https://webpack.js.org/configuration/resolve/#resolvemodules
I've got quite some experience in (web) development (Java, ASP.NET and PHP amongst all), and fairly new to React and Node JS.
Although I did multiple tutorials and read multiple articles, I feel like I'm missing some point here and there. Currently I'm working on a React app which implements a nice HTML template I found.
One React tutorial I did used Webpack for building and deploying the app (local). This works nice, does the job of transpiling ES6 (.jsx) and SASS using babel. So far so good :)
My template has an image slider (Owl Carousel), so I installed the react-owl-carousel module.
This gave me quite some problems with jQuery (also installed as a module).
After several attempts to fix this I decided to move on to another slider module, React Awesome slider.
I used the module as the README.md explained. But upon building it (npm run build), I got an error that the .scss file within react-awesome-slider could not be transpiled. A message like "are you missing a loader".
So I installed sass, node-sass, sass-loader etc etc and configured these in my webpack.config.js.
I also noticed the react-awesome-slider module within node-modules contained a webpack.config.js.
Long story so far, sorry, now to the essence of this question.
In what way can the modules installed (like react-awesome-slider) be considered "black boxes"?
It doesn't feel logical that all the modules get build when building the main app. The "exclude: /node_modules/," config in webpack.config.js prevents this, not?
So why does the react-awesome-slider give an error about .scss transpiling? I had no .scss rule in my webpack config then.
Will all dependend modules automatically get installed when installing a new module? So when I run "npm i react-awesome-slider --save-dev", will its dependencies also be installed? Or is this not necessary? And do I need to update (webpack) configuration after installing a new module? Or is it really black box and "self-containing"?
Any help would greatly be appreciated!!! Maybe there is a good react-webpack sample app on Github or something like that?
That also confusing me for a really long time. Here are some answers to your question.
people publish packages to the NPM, so a module your project depends on
can be pre-builded or source code, it depends. I have checked react-awesome-slider, it's main field in package.json is dist/index.js, directly import it won't cause an issue because there are no SCSS files.If you follow the CSS module usage instruction you have import react-awesome-slider/src/styles and you will find src/styles.js file import ../styled.scss,so webpack will load it with SCSS loader which you have not configured, that's why an error occurred.
while you install modules, npm will go
through its dependency tree, install its dependencies, dependencies'
dependencies, until there's no more dependency module to install. before npm 3.0 the node_module folder is tree structure reflects the dependency tree, but it causes problems that many modules relay on the same dependency, npm will download and save too many same files, after version 3.0 it becomes flat(release note here, search flat keyword).
You don't need to update your webpack config after you install a dependency cause webpack build process will handle it with file dependency tree. You have installed a package and import it in your activation code, file there will be handle( with its package.json main field file as an entry), you have installed a package without using it or import it in a dead file(dead file means you cannot find it from webpack entry file), it will be ignored by webpack as it's dead code.
I have too many confuse until I read npm docs. Good luck to you.
Node modules are build to execute packages.When the are compiled they have proper configuration to handle extensions that are imported in it and when you import something like .scss in your main app then it does not know about that extension then your webpack need rules to include that extensions.
It does exclude node_modules as the are pre-converted pr pre build.
More over webpack is bit tough so developers create CRA Have look at it.
I want to build a web client using react.js and semantic ui. There is a node package to use semantic-ui with react.js; semantic ui react. I have already installed this package on my computer following the instructions on react.semantic-ui.com/usage, but upon testing the with a simple webpage.
I think I have this issue because I failed to use this last instruction:
import '.../semantic/dist/semantic.min.css';. The semantic folder has been generated in my project main folder, but the dist folder and the semantic.min.css have not been generated yet. Where and how should I use this?
NB: I also tried adding this <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css"></link> to my index.html page and the page was style as expected. I don't want to use this option as I cannot change the them with it.
First - install css npm install semantic-ui-css --save
Then - import in at the index.js page (the very top level)
import 'semantic-ui-css/semantic.min.css';
First, use one of below package managers to install semantic UI react package.
For npm users:
npm install semantic-ui-react
For yarn users:
yarn add semantic-ui-react
Then add this import line to your index.js
import 'semantic-ui-css/semantic.min.css'
That's all.
For npm user:
npm i semantic-ui-react semantic-ui-css
semantic-ui-css is a package dependency of Semantic-ui-react (SUIR) and is the css only distribution with a unique theme. Semantic-ui is written in Less and provides a larger and finer control (per component) over the production of the final stylesheet (dist/semantic.min.css).
It delivers several themes easy to derive to create your own, and a proper picture about how to keep a big and complex css well organized and not invasive with less.
in node v12, the installation of sui-css may fail,
complaining that ReferenceError: primordials is not defined. See
https://stackoverflow.com/a/58394828/1874016.
You can also
git clone https://github.com/semantic-org/semantic-ui
apply the patch above in here.
and yarn install
Note the default semantic.min.css size is 628Kb and you probably don't need the styling for all the components it has.
npm install sematic-ui-react sematic-ui-css --save
In your root file probably src/index.js add
import 'semantic-ui-css/semantic.min.css';
Some common layouts can be found [here ]:(https://semantic-ui.com/usage/layout.html)
I've a directive that I want to publish on npm. I read the doc here and after that here is what I did:
Copy the .js file that is compiled from the .ts file. ( I didn't copy the map file)
Make new folder on desktop and paste it there
npm init and npm publish
create new project and npm install --save-dev my published package
However it doesn't find the name of the directive when I'm trying to declare it in the module
#NgModule({
declarations: [
AppComponent,
MyDirective //this is not found
],
The js file appears in the module folder though
You imported import {...} from 'your-package-name/your-main-js'; it, right?
Here's a nice guide to create npm packages for Angular2.
https://medium.com/#OCombe/how-to-publish-a-library-for-angular-2-on-npm-5f48cdabf435#.coog6uf98
If you want to create a component package, remember to inline your templates/styles ! Otherwise your app will be broken..
Or you could use a script like this https://github.com/ludohenin/gulp-inline-ng2-template to inline those templates/styles..
Maybe this repo as a starting point will help: https://github.com/mxii/ng2-offclick
You can also take a look at these resources:
http://blog.angular-university.io/how-to-create-an-angular-2-library-and-how-to-consume-it-jspm-vs-webpack/
http://myrighttocode.org/blog/typescript/angular2/components/npm/angular2-npm-components
https://github.com/jvandemo/generator-angular2-library
https://www.reddit.com/r/Angular2/comments/52vz2b/how_to_publish_component_as_library/
Just in case someone in the future might be struggling as I did here are the big steps.
npm init the folder so it has a package.json and add necessary devDependencies
compile .ts to js
tell npm to ignore .ts files in .npmignore:
node_modules
npm-debug.log
*.ts
!*.d.ts
I hope I didn't miss anything, in any case the tutorials above in the accepted answer will help