I'm looking for NPM toolset to help me to create baseline for Web projects with vanilla JS. So, as we set up Angular projects with angular-cli ng init command, React projects with create-react-app, is there any recommended NPM global tooling to set up all common toolchain (mainly Webpack, Babel and some development server with hot reloading/change detection) for non framework based projects?
Thank you for any suggestinos
I'd look at yeoman and available generators to pick one that suits your needs the most.
Here's a couple that might fit you:
webapp generator
babel boilerplate
grunt provides scaffolding. There are templates available, or it's fairly easy to create your own.
How can I convert a gulp setup project to normal angular js project without gulp?.
My friend gave me gulp setup project but I need to be able to run it without gulp.
If you're going to use a different build tool, just remove the Gulpfile and any npm dependencies related to gulp. Then install and setup the other build tool.
If you're not going to use a build tool at all, you do the same as above, but have to manually include all the .js files in your html file separately.
I don't suggest you use the latter of the two. Actually, I suggest you keep gulp, as it's a pretty decent tool.
You must have been using gulp for css minifying or some other tasks you can directly remove gulpfile.js file and run the angular project. It is not a problem having gulp it provides many tasks which reduces development effort unless if you trying to migrate to webpack or browserify tools i don't recommend you to delete.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 6 years ago.
Improve this question
I know this might be a silly question to some of you, but I am beginner in React, and I wish to create a really simple application.
I found a sample in which every component is saved in a separate js file, which looks very good for modularity and re-usage.
The only thing I need to take care of now is using export/require. However, I don't need to be dependent on nodejs. I just need a simple html/js application that can run on any cheap web server.
I read somewhere that I can use "Browserify", but after looking at it, it seems like a node library.
Is there any library that I can use from a web page (via cdn for example) that allow me to use require? If not, does that mean I can not separate react components in different files?
However, I don't need to be dependent on nodejs.
Use NodeJS. It is how React applications are designed to be built.
I just need a simple html/js application that can run on any cheap web server
NodeJS is only required at build time. You run it on your development workstation. The output is static files that you can upload to any webserver.
(NB: React applications are often designed to make HTTP requests to get dynamic data. Some tutorials cover using Node to build a server to listen for and make responses to those requests. Make sure you don't conflate the program to transpile the React application to ES5 (which runs at build time) with the program to run a webserver (at runtime) even if both are written using Node).
If you don't want to use Node, you can use webpack: https://webpack.github.io/
you will generate a static/bundle.js . If you want to learn more about it, I sugest http://survivejs.com/
What you need is a build step that packs the separate files into one or more packages that can be loaded in the browser.
Browserify can be used to do that, but WebPack is also popular.
These tools require some configuration, so I think that the best way to start is with a tool like create-react-app which is easy to install and has commands for developing as well as packing your app for deployment.
It uses webpack internally (along with some other tools) but saves you the hassle of configuring it yourself. If at any time you need advanced configurations beyond what create-react-app provides, it has an 'eject' command that exposes the raw configuration files.
Getting started is simple (taken from their readme):
npm install -g create-react-app
create-react-app my-app
cd my-app/
npm start
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I'm building a web application using a MEAN stack: MongoDB, Express, Angular, and Node.js, based on Daftmonk's angular-fullstack Yeoman generator.
Because most of my work is Java, I'm using IntelliJ IDEA however I'd like optimal introspection and workflow for this JavaScript module.
In order to achieve to most possible introspection, and least possible confusion, what plugins and project configuration should I use?
Here's the best I've been able to do so far.
There are some crucial IntelliJ plugins to install:
.gitignore support
AngularJS
Base64 for IDEA and Storm
BashSupport
Bootstrap
CSS Support
Database Support
ddescriber for jasmine
Git Integration
GitHub
HAML
Heroku integration
HTML Tools
Jade
JavaScript Debugger
JavaScript Intention Power Pack
JavaScript Support
JS Toolbox
JUnit
Karma
LESS CSS Compiler
LESS support
Markdown
Mongo Plugin
NodeJS
Require.js plugin
REST Client
Spy-js
SvgViewer 2
Terminal
W3C Validators
YAML
As a peace offering to the mighty IntelliJ, use Java as project SDK:
I prefer to configure four separate modules, to help separate back-end vs. front-end JavaScript dependencies:
Add the bower_components library to the client module, and the node_modules library to the server module:
And be sure to enable JavaScript libraries in the editor.
Per best practices, we do not commit the local IntelliJ IDEA configuration folder (/.idea/) to the repository, instead adding it to the .gitignore file like so:
# IntelliJ IDEA local workspace
.idea
Happy coding!
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 1 year ago.
The community reviewed whether to reopen this question 1 year ago and left it closed:
Original close reason(s) were not resolved
Improve this question
Is there any module in NodeJS to concatenate and minify JavaScript files?
I recommend using UglifyJS which is a JavaScript parser / mangler / compressor / beautifier library for NodeJS.
If you are interested in automation tools that do more than simply concatenate and minify files, there are the following solutions:
GruntJS is a task-based command line build tool for JavaScript projects. The current version has the following built-in tasks:
concat - Concatenate files.
init - Generate project scaffolding from a predefined template.
lint - Validate files with JSHint.
min - Minify files with UglifyJS.
qunit - Run QUnit unit tests in a headless PhantomJS instance.
server - Start a static web server.
Besides this tasks there's a lot of plugins available.
Gulp is a toolkit that will help you automate painful or time-consuming tasks in your development workflow. For web development (if that's your thing) it can help you by doing CSS preprocessing, JS transpiling, minification, live reloading, and much more. Integrations are built into all major IDEs and people are loving gulp across PHP, .NET, Node.js, Java, and more. With over 1700 plugins (and plenty you can do without plugins), gulp let's you quit messing with build systems and get back to work.
Yeoman is a robust and opinionated set of tools, libraries, and a workflow that can help developers quickly build beautiful, compelling web apps.
Lightning-fast scaffolding - Easily scaffold new projects with customizable templates (e.g HTML5 Boilerplate, Twitter Bootstrap), AMD (via RequireJS) and more.
Automatically compile CoffeeScript & Compass - Our LiveReload watch process automatically compiles source files and refreshes your browser whenever a change is made so you don't have to.
Automatically lint your scripts - All your scripts are automatically run against jshint to ensure they're following language best-practices.
Built-in preview server - No more having to fire up your own HTTP Server. My built-in one can be fired with just one command.
Awesome Image Optimization - I optimize all your images using OptiPNG and JPEGTran so your users can spend less time downloading assets and more time using your app.
AppCache manifest generation - I generate your application cache manifests for you. Just build a project and boom. You'll get it for free.
Killer build process - Not only do you get minification and concatenation; I also optimize all your image files, HTML, compile your CoffeeScript and Compass files, generate you an application cache manifest and, if you're using AMD, we'll pass those modules through r.js so you don't have to.
Integrated package management - Need a dependency? It's just a keystroke away. I allow you to easily search for new packages via the command-line (e.g., yeoman search jquery), install them and keep them updated without needing to open your browser.
Support for ES6 module syntax - Experiment with writing modules using the latest ECMAScript 6 module syntax. This is an experimental feature that transpiles back to ES5 so you can use the code in all modern browsers.
PhantomJS Unit Testing - Easily run your unit tests in headless WebKit via PhantomJS. When you create a new application, I also include some test scaffolding for your app.
UglifyJS is a Node module that is all about minifying javascript. I don't think it also joins files, but there might be an option I missed.
Edit:
With UglifyJS 2, it has built in concatenation as well.
If you want to do this inline in your node app it's really easy. This allows you to dynamically generate your minified/concatenated js script at runtime without using the grunt or yeoman way.
npm install uglify-js
and in your module:
var fs = require('fs');
var uglify = require("uglify-js");
var uglified = uglify.minify(['file1.js', 'file2.js', 'file3.js']);
fs.writeFile('concat.min.js', uglified.code, function (err){
if(err) {
console.log(err);
} else {
console.log("Script generated and saved:", 'concat.min.js');
}
});
If you're using Connect, then I've had good luck with Connect-Assetmanager
You'll be better using something like gulp / webpack to concat/organize/bundle your assets.
In order to join js file you can do as its done in twitter bootstrap makefile
cat js/bootstrap-transition.js js/bootstrap-alert.js js/bootstrap-button.js js/bootstrap-carousel.js js/bootstrap-collapse.js js/bootstrap-dropdown.js js/bootstrap-modal.js js/bootstrap-tooltip.js js/bootstrap-popover.js js/bootstrap-scrollspy.js js/bootstrap-tab.js js/bootstrap-typeahead.js > docs/assets/js/bootstrap.js
This is just a concatenation of files with an output to a js file
Then you can install uglify-js to minify js:
npm -g install uglify-js
And perform this command with your path/file.js ofc:
uglifyjs docs/assets/js/bootstrap.js -nc > docs/assets/js/bootstrap.min.js
As mentioned in comments since uglifyjs 2 you could also do:
uglifyjs --compress --mangle -- input.js
If you like the Rails 3.1 asset pipeline approach, you should try my connect-assets library.
I'd definitely suggest the Closure Compiler's simple mode.
Maybe not exactly what you're looking for but Enderjs could work.
Try these two plugins for Grunt
https://www.npmjs.org/package/grunt-contrib-concat
https://www.npmjs.org/package/grunt-contrib-uglify
You can install everything you need like so:
npm install grunt
npm install grunt-cli
npm install grunt-contrib-concat
npm install grunt-contrib-uglify
Then create your grunt file, like so:
Gruntfile.js
module.exports = function(grunt){
grunt.initConfig({
concat: {
options: {
process: function(src, path){
return '\n/* Source: ' + path + ' */\n' + src;
}
},
src: [
'../src/**/*.js'
],
dest: '../bin/app-debug.js'
},
uglify: {
src: '../bin/app-debug.js',
dest: '../bin/app.js'
},
watch: {
options: {
atBegin: true,
event: ['all']
},
src: {
files: '../src/**/*.js',
tasks: ['concat']
},
dist: {
files: '../bin/app-debug.js',
tasks: ['uglify']
},
}
}
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.registerTask('default', ['watch']);
}
Finally, type grunt in the terminal and Grunt will start watching your JavaScript files for changes and automatically concat and uglify them (whenever you save a change to your js files in ../src/
If you already have uglify-js, your code uses some of the latest ES6 features (ECMAScript 2015) and it just gave you back parse errors on the first run, then install uglify-es:
npm install uglify-es -g
Or:
npm install mishoo/UglifyJS2#harmony
The explanation is in uglify-js-es6 package:
This is a temporary package containing the latest release of the 'harmony' branch of uglifyjs (UglifyJS2).
You can still run it normally with the uglifyjs command. A compress and mangle example:
uglifyjs -c -m -o js/es6stuff.js -- js/es6stuff/*.js
Which will produce a single file with all the JS files of a folder. The double dash (--) just prevents input files being used as option arguments.