I used to use gulp for merge few static linked JS libraries files into one.
I've installed webpack and add react and few libraries as npm module. It works fine.
Now I want to completely remove gulp so I need to ONLY concatenate JS libraries (lot of jquery plugins and old 1.8 jquery itself). I don't want to install these JS libraries via npm, because it will be too much work.
When I use webpack to bundle these libraries it doesn't work, because webpack wrap these libraries and I can't use these without add requires.
Could you please tell me how to ONLY concatenate JS files into one with webpack?
Thank you.
Webpack is module bundler and that is how it works. If you just want to merge many js file into one then just use another tools like gulp. Webpack is much more.
Related
If i generate a bundle of a library, should I put the library dependencies in devDependencies?
I'm authoring a NPM library written in TypeScript which uses a quite amount of dependencies, such as React components.
We do some build steps to compile down to JavaScript files, apply minification and bundle into a single JS file.
The final published package for this library will contain just a JS file, the output of this build steps.
When I install the package all the dependencies of this library will be installed as well. Should I put those libraries as devDependencies instead in the package.json, given that they are not needed because the JS file will already bundle them?
Not sure about the way you build.
Not needed to put all devdependencies if it is already part of the js file.
If it is going to be only a js file, it can be hosted as CDN file.
I'm trying jQuery for the first time, I know this library is becoming more and more unused, but I need it to work with it on a project.
So I initialized a jQuery project with npm install jquery, so node modules and package-lock.json were created. I wonder how should I target library files on the index.html file, I mean maybe it should be something like this <script src="./node_modules/jquery/dist/jquery.min.js"></script>. Also how should I use libraries on .js files.
I don't know if I should point file by file or how should I use library files. Maybe someone could guide me with examples or docs on how to start using a jQuery libraries on a project.
In your relevant javascript files (where you need to use jQuery) you should be doing
import $ from "jquery";
at the top. Also install and configure babel for compiling as it will
support ES6/ES2015 modules even if browsers do not yet support.
I am currently developing a Typescript application using lit html. I have reached the point where I want to bundle all my typescript files, minimize them in to a single javascript file. Using VS Code as the IDE.
I have been looking at options - rollup.js is one option but I couldn't work out how to bundle multiple ts files in to a single js file, minimize it and also ensure the modules are handled correctly.
Any examples of using rollup.js to do such available or another alternative available?
You can use Parcel js for this as well. This will generate one js file. but if you require rollup js, may be this link will help you out.
Generate typescript definition files using rollup
Our team develops browser side javascript app. We use angularjs as framework and some helper libraries in global namespace. For example: underscore.
We carried out a large piece of code (input/output data tranformation) into a standalone library for unit testing reasons.
Now i try to use browserify with this library. The question is about what the best way to exclude from bundle shared (with main app) dependences (underscore for example).
I tried 2:
Using --external. I have to create bundle from underscore and use it for all code stuff in app. If i understood right this way seems inconvenient.
Using browser property in package.json to replace underscore with stub:
module.exports = _;
I believe that there is more clean approach, but where is it?
You don't have to use --external or something like that. Just include the library like this:
<script src="external/lib.js"></script>
then you can use it within your bundle (without require).
BUT: In my opinion you shouldn't mix global libs with browserify. All benefits of browserify will decrease drastically this way.
Contras:
more than one file to include
worse readability cause fewer `require` statements
RECOMMEND:
create one bundle with all external libs and install them as npm modules.
npm install --save angular
npm install --save lodash
create external bundle:
browserify -r angular -r lodash > external/libs.js
you only have to bundle it once because they should never change. then create main app bundle without external modules:
browserify --no-bundle-external app.js > bundle.js
then include these two bundles to your page:
<script src="external/libs.js"></script>
<script src="bundle.js"></script>
I installed bootstrap via npm and i'd like to require it via browserify, so I use:
require('bootstrap');
But there are 2 problems here:
It takes the non minified version of bootstrap
I would also like to include the bootstrap.tpl.min file
How can i do it?
Unfortunately browserify won't solve either of those problems for you. NPM packages are meant to be small and solve one problem well and browserify's domain is resolving all the dependencies you require and packaging them up into one file for the browser.
Minification of your bundle should happen as part of your build step using gulp or grunt using a package like uglify.
Including a template file will also require some additional work if it's not included in what's exported from bootstrap. You can either require the specific file from the module if you need access to it in code, or you could copy it to the directory that you're serving up either with your build tool or using bower