I currently have a Node.js project that has a couple dependencies (request, bluebird, etc.) that I include in my project with RequireJS, such as var Promise = require('bluebird');.
I have a Gruntfile that concatenates and uglifies all the files I've created into one big, minified file which works. However, they still have the RequireJS statements. For someone to use my project, they'd need to download my project, run npm install, and then they would have all the required dependencies.
I'd like to have a app.min.js as a standalone file, with all the required modules concatenated into this file itself, without a user needing to install depencies or import my whole project. Is there a way, using Grunt, that I can dump the source code of each module depencency (and in turn, their dependencies) into one concatenated, minified file, along with my code (which I've done this to already).
Try grunt uglify. https://github.com/gruntjs/grunt-contrib-uglify
Here's a good tutorial as well https://egghead.io/lessons/grunt-minifying-your-output-with-grunt-uglify
Related
So I've been handed an Angular 1.5.6 project that has source files and compiled files but nothing to instruct how to compile the source files. Is there a standard approach I'm missing to do this? There's no buildfile, package.json, angular.json file in the src directory.
Question is quite general.
Not sure about any 3rd party libs may be present and require some additional transformation, but angular app source files probably may be just be joined altogether(maybe after transpiling with Babel) and injected into HTML with <script> right after angular.js itself.
Also if you see something like strange "ngInject"; strings or comments you will probably need ng-annotate module to autogenerate dependencies for modules. It may be run in combination with gulp or Babel.
Originally these where JS files and all was well. But I wanted some simple type checking, so I converted to TypeScript.
What I would like is to compile all the .ts files into one .js suitable for use in the browser with a simple script tag.
This project does NOT include webpack, so please refrain from webpack related instructions.
I tried this
tsc main.ts --module amd --outFile main.js
and
tsc main.ts --module system --outFile main.js
But both seem to require I include a further third party library on the page.
Is there a way I can get all the files concatenated together so everything just works? I tried running the output of the amd built version through the browserify command, but no dice.
If this doesn't work I will just go back to .js and include with script tags like normal.
TLDR: How can I get bundled ts into a single js with no requirejs or systemjs dependency on the page?
I have a javascript codebase with a structure like this:
node_modules/
src/
/script1
/script2
/script3
package.json
package.lock
.env
etc...
The scripts are simple utilities that sometimes include code from each other's folders to maximize code reuse. Even if they didn't do that, they share the same node_modules folder so they are entangled anyway.
I want to run something like webpack on /script2 (but without targeting the web) so that all its unique dependencies are inlined as one massive JS script... (Or failing that, build its unique dependencies to output its own node_modules and package.json files... but that sounds way more complex).
How do I keep the current project structure but still build standalone pieces as needed, for different environments (mainly serverless functions)? Thanks.
Basically you can run webpack on each one of the files as an entry, and configure webpack to work with node target.
I have written a node module and published it as a node package. It works when I use it in backend applications (pure nodejs, no babel or transpile).
However, when I use this same npm module in the frontend (in my case a 'create-react-app') application, it breaks. Bellow is the exact error:
Module parse failed: Unexpected token (14:2)
You may need an appropriate loader to handle this file type.
The error is referring to my use of the spread operator (...). I would prefer not to have to rewrite the library, and would rather add some kind of transpiler to package my library. I haven't found a clear solution to this, they are all very convoluted.
I have tried using rollupjs, and https://github.com/insin/nwb. Neither sadly seem to be what I'm after.
Run my code:
You can install the library to your create react app using npm i cbs-proxy-client#0.0.3. And then add the line const cbsProxyClient = require('cbs-proxy-client') or import cbsProxyClient from 'cbs-proxy-client' to any of your scripts.
Advice would be appreciated :)
A library used for frontend is expected to package an already transpiled version of the source javascript. To do this, you might want to use rollup as a build process in your library to create a bundle file. You can use babel to transpile your code for desired browser support. Let's say the bundle file is saved in dist/bundle.js. Now you will modify the package.json to load this bundled file as the entry file using main parameter in package.json
If you are building using rollup or webpack, it is easy to miss that the bundled file should be prepared as a library. This means that importing the file using commonjs should be able to export correct variables. A typical webpack build removes such exports because it is supposed to work straight on a browser. This blog is in my bookmarks titled "js library steps" since I was creating my first js library.
Note that you do not need to put your generated file in version control. You can use npm files property in package.json to package your bundled files while ignoring them in git.
Question 1 :
I am installing my project dependency libraries using npm and it gets stored in the npm_modules folder. Is it necessary to keep the copy of library like angular.js,angular-route.js in lib folder or vendor folder? I could see few people are using lib folder or vendor folders to store the library in the permanent manner. I am confused by seeing this.
Question 2:
Do I need to copy/paste the node_modules folder to production or just run the npm install command on the project folder's command prompt to install all the dependencies in production. How does a dependency library get promoted to production?
Thank you kindly for your advice.
It all depends on how you need to deploy your site to production, really. Ultimately, you will probably want to bundle all your JS files into one or a few files, which are minified and sent with gzip compression.
How you bundle them is up to you. There are quite a few options:
Browserify
Webpack
Grunt / gulp build process
And many more besides
As to whether you need to keep a copy of these bundled javascript files under version control, well I think that boils down to 1 key question: can you run a build process (such as one of the tools using NodeJS) on the production server, or on a build server that creates a zip file or installer? If so, then you don't need to include them, just get the build server or production server to check out the latest copy from version control, npm install and then run the build process.
But if the best you could do is have the production server check files out from source control, then you would want to include the final versions of the files to use in the repository.
Keeping generated files, such as your bundled javascript files, in your source control repo should be avoided where possible. Because otherwise, every commit has to contain the changes to the source files, and the corresponding change to the generated files as well. And the latter is just noise, and has to be ignored by every developer looking at a diff/patch for a commit.