I have been setting up my development environment for my Laravel/AngularJS project. My IDE is JetBrains PhpStorm. I am wondering what are the best practices for configuring the IDE to deal with the node_modules (or bower_components or vendor for my PHP) folder, so that:
It is not included in the code inspection as far as the modules' internal code is concerned.
It is included in the code inspection as far as references in my own code to the modules is concerned.
It is included in Autocomplete or Code Navigation (Ctrl+click on methods)
To make it more clear: I want to be able to Ctrl+click on methods of my node modules and be redirected to the source code of these modules. I also want to be warned if I write a node module method wrong, or if it does not exist. Also autocomplete a method, when I press Ctrl+Space. But I don't want the internal code of my node modules to be included in code inspection, because it takes a lot of time to inspect all the modules, and they are supposed to be ok, so I don't need to inspect them.
I already tried two solutions:
Marking the folders as excluded: This does not work because the folders are totally excluded from the project and redirection and inspection does not work at all
Creating a specific Scope (in PhpStorm Settings), that includes all files except the node_modules folder, to use when I manually run Code Inspection: It is impossible to exclude the node_modules folder, because my IDE recognizes it as a module "I think" (it has [webapp] next to it in the Project explorer). I could however exclude bower_components and vendor.
Regardless my tries, what is the best way to deal with it?
As it's mentioned in help, PhpStorm auto-excludes node_modules folder from indexing for better performance, adding the direct dependencies listed in package.json to javascript libraries for completion, etc. So the best way to handle node_modules is relying on the IDE default procedures
Related
Someday I just got curious about node_module in framework or UI libraries such as React. After searching some stuff, I found there should be no changes in node_modules unless the user really needs to, so here's my questions.
Why there shouldn't be changes in node_modules?
Even I change the code, there were no change in result. Why does this happen? Even deleting the file or folder inside node_modules there were no changes. (I thought it should show an error, but it worked Ok...)
When we start the framework (like npm start in React), does NPM downloads the external files for example from Github everytime and places in the DOM? If that's right, the files in node_modules are just readable ones?
Could someone give me an answer?
node_modules are the libraries / packages / modules (whatever name you call) written by the open source community. They can be inter-depending. If you change one of those files without reviewing the impact to their dependent, the execution of code may crash.
However, not every single file or every single line of codes are required for each execution of code. Most of the time, one package can do things way more than what your code truly needed. If your code doesn't depend on the files that you changed, your project can still run happily.
npm start doesn't download files automatically. npm install does. So files in node_modules are not readable only. However, in many case, files in node_modules were ignored from git commit. In server environment, packages are freshly pulled from remote, instead of from your local machine. Therefore your changes to packages would not be deployed unless you explicitly do so.
Technically you can modify the files in node_modules and NOT running npm update forever - not a good commercial practice. Acceptable for personal project, if you are the sole programmer and can fully control when to update packages.
Well, if you change your node module an npm update will eventually overwrite your code and you will lose your functionality possibly even without knowing where the problem is.
I'm just starting to learn Angular, I installed in my Ubuntu Linux:
Angular CLI: 7.1.4. and
Node: 10.14.2.
My question is, why one project is too large? I mean a simple "helloworld" is 334MB, I don't know why, Is it possible resize it? or delete any folder that is unnecessary? Or Is there something wrong with my installation? (how can I detect that?)
The bigger folder is node_modules, and when I create my projects, generates a lot of folders.
I was reading about "angular lazy loading", but I'm new.. It is not totally clear for me.
this is the folder spaces:
Please... I hope somebody can help me...
best regards
You might be using big bundles which are not needed, so you can break them up:
https://medium.com/#julienetienne/javascript-bundles-are-too-big-break-up-the-libraries-3be87d5ef487
In modern JavaScript, projects require modules that themselves require modules that require modules... resulting in node_modules directory with hundreds of dependencies. A 100Kb library might be included because someone needed one function from it. JavaScript is not compiled, so all that source tends to be rather big. This is an unfortunate, but unavoidable truth; your Angular project directories will be big, and there's nothing you can do about it. It is perfectly normal.
The good part: modern JavaScript deployment typically includes packing up those libraries with Webpack or Parcel or similar code bundlers. Most of them implement "tree shaking", which analyses the code to find only the functions that are potentially utilised starting from the entry point, and only bundle those, ignoring the rest. This means that 100Kb library whose one function is used is transformed into just that one function in the final distribution bundle.
Not all of the bundlers are equally good at it at this point. For example, Webpack cannot tree-shake the CommonJS modules, only ES6 ones.
You can remove node_modules folder when you are not going to use the app.
And, when you need work on the application, you can re-generate node_modules using the command: npm install
Those are just node-modules, they are needed for building the project, but not necessarily everything inside of them will be deployed to production. As Amadan said, there is a process of tree-shaking (filtering only used modules) and also in production you use the minified version of the same JS code (where for example whitespace is missing and variable-names are shortened), among other optimizations. A production-optimized Angular project should not be more than a 100KB for a hello-world application.
In the provided image I see packages like
selenium-webdriver
protractor
Those belong to dev-dependencies (see your package.json file) because they are used for testing. When building for production, no code from dev-dependencies should be included. The typescript package (which is nr.2 in size in your screenshot) will also not be present in production because types like string are only used for writing Typescript code, but the browser receives Javascript, which it is compiled to.
Node/NPM newbie with a front-end dev question. I understand one of the strengths of an NPM-type module is that its dependencies get installed within itself, in node_modules. Modules always have the code that they need, and outside libs don't conflict.
That said, seems like this would result in the client downloading the same lib+ver (say, jquery v.X) multiple times. What's the technique for specifying that a module needs a dependency but that it shouldn't package that code if the dependency is already available on the site/page? Does said technique involve parent modules that make the shared lib+ver available?
Or, should various front-end modules just re-download the same lib+ver that other modules on the page might have already downloaded?
The client will only grab files from that folder that are needed, so if it's linked in HTML once the client will only grab it once. NPM handles dependency duplicates automatically.
Having said that, normally you will want to only serve a static folder to the client without revealing your entire server structure. This can be achieved using:
app.use(express.static('server/public')
where 'server/public' is the directory relative to the server.js file that you want to serve. In this case, 'public' contains all my linked view files, stylesheets, JS files, etc. that are linked from the HTML pages. You don't need to move that module's dependencies there as well.
The downside to this is that you'd have to manually move dependencies into the public folder (I make a 'vendor' directory usually) and link from there. It's more work but it's much more efficient and safer in the long run.
NOTE: when using a static folder to serve files, your HTML links will be served from a relative path to that folder.
I have the same problem that has already been documented on GitHub here. ui-tinymce references a number of dependencies which cannot be reached in my application.
GET http://localhost:8080/jspm_packages/github/tinymce/tinymce-dist#4.3.12/themes/modern/theme.min.js # angular.js:6084
tinymce.js:9426 Failed to load: /jspm_packages/github/tinymce/tinymce-dist#4.3.12/themes/modern/theme.min.js
I am able to use the workaround suggested in the github issue above, which changes the baseURL. This works fine in my development environment. However, when I run jspm bundle-sfx it does not pick up these dependencies and I am left in the same situation without templates or plugins.
What is the best way to address this? Can angular-ui-tinymce be broken down so that the dependent files are available in separate packages? Or should I just use gulp to get around this problem?
I tried using Gulp to concatenate the missing files, however this will not work because by default tinymce still expects the files to be at the relative locations which it uses in its own internal file structure.
I still think it would be helpful for Tinymce to provide separate packages for the most common themes, however I admit that there are a lot of themes and plugins so this would be a fair amount of work.
In the end the simplest thing to was to copy the theme and plugin files into the "correct" relative directories within my own source code. This way I can change the relative baseURL for tinymce and it will be correct when I run it in production as well as development environments.
This way I can run jspm bundle-sfx and it will bundle these files along with everything else. However you may have to import the files explicitly if you do not serve the area statically in your application. For example:
import 'sysadmin/app/tinymce/themes/modern/theme';
To be completely specific:
I am writing a Node.js app that is intended to be a websocket bot for Slack.
A Node project exists that abstracts the majority of the Slack API. (It is NOT an npm module.)
I'm not overly familiar with grunt, etc. but I can get the dependencies to install and utilize all this code by placing my own mybot.js in the root folder of this git clone and running node mybot.js with mybot.js being based on the files in the example folder.
Committing to my own repository, I don't want to commit any of the aforementioned project code -- it's not mine! I do, however, want it as a dependency. Unfortunately, this code by Slack is not an npm module that makes it easy to do. The project has a /bin folder and a /src folder full of coffee script, etc. that grunt builds to .js files.
The Slack project code has its own dependencies. In my way of thinking, those are sub-dependencies for me, or cascading dependencies. My project only depends on whatever the Slack project depends on.
I would like to be able to update my project with updates (manually, or via build) from the git repo of the Slack project as needed.
It seems there must be a way for me to include this project as a dependency, and once built, properly reference it's bin and src folder objects (bin/slack, src/message, client, channel, user, etc.) without committing it to my own repository. Especially great if it could be in a subfolder separate from my own model definitions. In a way, this seems no different to me than including jQuery in my website layout via a CDN. I'm only asking for the jQuery project and depending on my link flavor, I can get a specific version or the latest version, etc.
So, it turns out the comment by Ben pointing me to the npmjs.com slack-client npm module was the help I really needed. I just didn't really know how to ask the right question, I think.
And while I hate to look a gift horse in the mouth, a little more than a link, Ben, would've saved me another three hours, probably. Perhaps: "It is an npm module, not just a project from github." But thank you, even if it took me a while to decipher what you were saying.