I have a VueJS project that uses Vuetify. I've created a web component that requires ShadowDOM and I've had to make a change to a single file in node_modules to make the Vuetify dialog work in ShadowDOM.
I got the fix from here.
I'm aware that changing files in node_modules is not recommended but what is the best practice when a change/fix needs to be implemented such as my one?
Can a function within a file contained in node_modules be overridden?
Related
I am very new to vue and I have followed some guideline to use it.
In the first, that is here the project was structure in this way:
1) There is a src directory, and inside I have : assets,components,route,services and view.
2) There is also a server directory and inside I have : src and models directory.
But, In another guide, this one I found this skeleton:
1) There is only a src directory.
Which is the best way and Why is better to use one of this structure?
Thank you
The recommended way is for you to create a project with Vue CLI, which will end up creating the structure you mentioned first.
In a very simple project you can put all just into a simple src directory, but that is off topic here on Stackoverflow, because it is an opinion; there is no such thing as a single correct directory structure.
Don't get hung up on this. If you are new, and you're not aware of having special requirements, start with the templates in vue cli. They are a good common standard. If/when you want to branch out, do so for a reason. Here are some good project templates with various specialisations (enterprise, OAuth, etc)
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
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';