When I download a package in bower or npm, many irrelevant/not-useful files also
get included especially in npm packages. I generally only include .css or .js files of that package for e.g. in bootstrap e.t.c. But for package like polymer or Anjular.js or Electron we need multiple other file too. So when I deploy my project should I include the complete folder or just copy the required files separately or is there any other approach ?
When you deploy to your production server, a good approach would be to only include the files you are actually using. You should also create an optimized file to serve to the client.
To achieve that, you normally have a deploy script that generates one or more minified .css or .js files (for example, vendor.js for libraries and bundle.js for your code).
This script can be build with tools like grunt, gulp or you can use a module bundler like Webpack or Jspm.
You can create your own Grunt or Gulp script like the ones in this website.
When using a module bundler and modern javascript to organize your code, you'll build, for example, an entry javascript file (bundle.js) that will look like
import {MyLibrary} from 'my-library';
import {AnOtherLibrary} from 'an-other-library';
console.log(MyLibrary.saySomething());
In this case, Webpack handles the node_modules imports and the creation / minification / concatenation of the production version of .js files.
As you said, there are multiple files to be included (js, css or even fonts) so configuring your scripts may take some time. Try finding a Yeoman generator that uses your frameworks, and use the deploy scripts others already created for this purpose. This one uses AngularJS, Bower and Grunt. This one uses Webpack and ReactJS.
Related
NPM donwloads a lot of files needed for the webpack/libraries. From what i understand, webpack generates a one single bundle file, that contains all code for script working. After that, when i finish building my app, do i need to keep all those jquery/react files and webpack itself? Or should i just delete them?
It's common practice to make a project portable/shareable by following these steps;
Create a package.json and ensure to capture all dependencies,devDependencies and/or peerDependencies.
Add/commit this package.json and package-lock.json files to your version control
Create a .gitignore file and add node_modules to it (in essence, this cuts out that baggage)
For production purpose (e.g. to be shared with client finished product), build the project (which often results into a small files, often within /build or dist). And then you can always push that build file to AWS or Heroku or the clients' servers.
What does the above help you achieve?
You can easily start the project using any machine, as long as you run npm install which reads from your package.json.
I have a program with multiple .vue files in src/components. These use typescript and sass. The program uses webpack for compilation and bundling. I would like to add all these components to a single npm package to be used as a library with the following restrictions:
It should be compiled down to javascript and css so whoever imports my library doesn't need my compile dependencies and webpack configuration
The components depend on typescript files. These should also be compiled, but not bundled. They are valid entry points for the library.
The import for the users of the library should be as painless as possible. It would be optimal if the generated js and css could be loaded in a single import, just like importing a .vue file
Is this possible to do? And if so, how? If not, how could I best approximate this or what are my alternatives?
I have tried to use vue-cli-service build --target lib but it seems that can only handle one component, bundles the ts files, and I'm not sure if it behaves like I expect when you import a file.
I am using VS 2019 for Core 3.1 development and I installed Font Awesome whith Yarn:
yarn add #fortawesome/fontawesome-free
However, whenI try to reference it in my HEAD section like this:
<script defer src="~/lib/#fortawesome/fontawesome-free/js/all.js"></script>
I get the following error:
the 'fortawesome' doesnt exist in actual context
Package managers like yarn, npm, etc. just add the packages to your project. They generally aren't ready to deploy directly at that point, but rather require a build pipeline to create the actual JS/CSS resources. The #fortawesome/fontawesome repo is an exception in that 1) it's not actually a package and 2) the files are already "built". Even then, though, they still won't be in the right location.
I'm not overly familiar with yarn, but npm, for example, puts everything in a node_modules directory. That directory is not served by default, and should not be served, because it contains "raw" stuff. You'd need a separate build pipeline (using npm scripts, webpack, gulp, etc.) to build/copy assets into a directory that is served (i.e. wwwroot). That is likely the piece you are missing.
For this, since there's no build actually required, you just need to have the assets copied to something like wwwroot/lib and then you'll be able to reference it via the script tag on the page. That can be done with any tool like npm, webpack, gulp, grunt, etc. so you'll just have to research and pick the one that fits your needs best.
I was of the understanding that Browserify could be used to bundle various JavaScript files into one. However, after looking at some examples on the internet, I found that some people use Browserify and yet they also include gulp-concat.
For example, the angularjs-gulp-example project uses both.
Why? I thought Browserify could do the concatenation as well.
Browserify is a bundler that creates JavaScript bundles from CommonJS modules. Typically, the bundle will contain all of a project's source files and all of the CommonJS/UMD dependencies. (Also, like Node, Browserify can require JSON files, so they could be in the bundle, too.)
If a project has dependencies that are not included using require and are instead indended to be used in <script> elements - the build process might opt to use a tool like gulp-concat to concatenate them to the front of the bundle.
That's likely why gulp-concat is used in the project you referenced in your question. It concatenates an Angular template cache that's generated from .html files - something Browserify doesn't deal with (unless a transform has been configured).
Is there a way for gulp-less (or some other tool) to take the paths to images that are referenced in the .less/.css file and put the files to the destination folder?
Right now when I install a node module, I #import the css file from /node_modules/... directory to my main .less file and it will be included in the bundle, but the images that come with the module are still located under /node_modules/... folder which I don't plan to deploy so using a relative URL would be pointless.
You should consider using bower to split your dev dependencies (handled by npm, non-deployed stuff) and front-end libs (handled by bower, deployed stuff).
Using a .bowerrc like this, you can tell where to save the libs in you projects structure:
{
"directory": "./<your-public-folder>/libs"
}