I'm running Backbone with node using the following code in index.html
<script src="js/api/require.js"></script>
<script>require(['js/require-cfg'],function(){require(['main'])});</script>
main.js looks like this:
require(['app'],
function(App){
App.initialize();
}
);
In production, I compile the files using r.js into main-build.js and redirect the link in the index.html file from main to main-build:
<script>require(['js/require-cfg'],function(){require(['main-build'])});</script>
Currently, if I want to deploy my code to production, I have to either manually change from main to main-build in index.html, or keep the link as main-build but change the contents of main-build.js to the same as main.js when I run a local or test environment, then switch back when deploying to production.
Is there a better (automatic) way of having the code use the compiled main-build.js when in production, and the content of main.js when in local or test environment?
eg: using node environment variables to either change the links in index.html (not sure how to change html!) or change the content of main-build.js but the content gets overwritten everytime r.js is run to compile for production
I personally use Gulp to process the index.html file with gulp-html-replace.
In development, you put the tags you need.
<script src="js/api/require.js"></script>
<!-- build:js -->
<script>require(['js/require-cfg'],function(){require(['main'])});</script>
<!-- endbuild -->
To make a build for production, create a gulp task which uses the gulp-html-replace plugin :
var gulp = require('gulp'),
htmlreplace = require('gulp-html-replace');
gulp.task('build', function() {
return gulp.src("index.html")
.pipe(htmlreplace({
js: {
src: [['main-build']],
tpl: '<script>require(["js/require-cfg"],function(){require(["%s"])});</script>'
},
}))
.pipe(gulp.dest("build/index.html"));
});
If you go the Gulp route, you could make all the build process through it. For example, here's a simple r.js task:
var rjs = require('requirejs');
gulp.task('optimize', function(done) {
rjs.optimize({
name: "main",
out: "build/js/main.min.js",
/* ...other options */
}, function(buildResponse) {
done();
}, done);
});
I am using Gulp and Browserify to build a TypeScript librariy which depends on some other libraries like for example jQuery via NPM. This is my current gulpfile:
var Gulp = require("gulp");
var Browserify = require("browserify");
var Buffer = require("vinyl-buffer");
var Rename = require("gulp-rename");
var Source = require("vinyl-source-stream");
var Tsify = require("tsify");
var Uglify = require("gulp-uglify");
var Manifest = require("./package.json");
Gulp.task("build-Debug", function () {
return Browserify({
debug: true,
standalone: Manifest.name
})
.add(Manifest.main)
.plugin(Tsify)
.bundle()
.on("error", function (error) { console.error(error.toString()); })
.pipe(Source(Manifest.name + ".js"))
.pipe(Buffer())
.pipe(Gulp.dest("./dist"));
});
The bundled JS-File gets included in my site and everything works fine. I am just missing one thing: on some sites, I need to define some custom JS which shouldn't get part of the library. These custom script should be able to use jQuery for instance, but it can't since it isn't accessible from outside of the bundle.
Now, I could include it again, but this does not make sense to me. So i'd like to know:
Is there a way to make all of my dependecies from package.json accessible from outside the bundle, so that I would be able to call
$("#my_id")....
in my custom client-scripts?
You can use Browserify's require method to expose modules as external requires:
return Browserify({
debug: true,
standalone: Manifest.name
})
.add(Manifest.main)
.require("some-module") // Some module in node_modules that you want to expose.
.plugin(Tsify)
.bundle()
...
You'd obtain the module in a <script> element like this:
<script>
var someModule = require("some-module");
/* ... */
</script>
To verify that this does in fact work, you could test it with the following files:
build.js
const browserify = require("browserify");
const path = require("path");
browserify("app.js")
.require("jquery")
.bundle()
.pipe(process.stdout);
app.js
const jquery = require("jquery");
console.log("Hello, world.")
index.html
<!doctype html>
<html>
<head>
<title>so-41095676</title>
</head>
<body>
<script src="./bundle.js"></script>
<script>
console.log(require("jquery"));
</script>
</body>
</html>
Create the files in a directory and run these commands:
npm install browserify jquery
node build.js > bundle.js
Then open index.html and you should see the jQuery function logged to the console.
I'm making a website using Angular2 and I'm having what i suppose is an issue. On the first load of my angular page, SystemJS is making more than 500 hundred requests to retrieve every Angular2 file in angular2/src directory. In total, the first load downloads more than 4MB and it takes more than 14 seconds to start.
My index.html does the following scripts includes:
<script src="libs/angular2/bundles/angular2-polyfills.js"></script>
<script src="libs/systemjs/dist/system.src.js"></script>
<script src="libs/rxjs/bundles/Rx.js"></script>
<script src="libs/angular2/bundles/angular2.min.js"></script>
<script src="libs/angular2/bundles/http.dev.js"></script>
<script src="libs/jquery/jquery.js"></script>
<script src="libs/lodash/lodash.js"></script>
<script src="libs/bootstrap/js/bootstrap.js"></script>
And my systemJs initialization code looks like this:
<script>
System.config({
defaultJSExtensions: true,
paths: {
'*': 'libs/*',
'app/*': 'app/*'
},
packageConfigPaths: ['libs/*/package.json'],
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app/main')
.then(null, console.error.bind(console));
</script>
My public folder has the following structure:
.
├── img
├── styles
├── app
├── libs
| └── angular2
| └── systemjs
| └── rxjs
| └── jquery
| └── lodash
| └── bootstrap
└── index.html
A couple of screenshots of some of the js files that are being requested:
Is there a way to avoid all of those requests?
I had the exact same problem, was actually looking at this post for an answer. Here is what I did to solve the problem.
Modify your project to use webpack. Follow this short tutorial:
Angular2 QuickStart SystemJS To Webpack
This method will give you a single javascript file however it is quite large (my project file was over 5MB) and needs to be minified. To do this I installed webpack globaly:npm install webpack -g. Once installed, run webpack -p from your apps root directory. This brought my file size down to about 700KB
From 20 seconds and 350 requests down to 3 seconds and 7 requests.
I see you already have a response, which is good of course.
BUT for those who want to use systemjs (like I also do), and not go to webpack, you can still bundle the files. However, it does involve using another tool also (I use gulp).
So... you would have the folowing systemjs config (not in the html, but in a separate file - let's call it "system.config.js"):
(function(global) {
// map tells the System loader where to look for things
var map = {
'app': 'dist/app', // this is where your transpiled files live
'rxjs': 'node_modules/rxjs',
'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api', // this is something new since angular2 rc.0, don't know what it does
'#angular': 'node_modules/#angular'
};
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
'app': { main: 'boot.js', defaultExtension: 'js' },
'rxjs': { defaultExtension: 'js' },
'angular2-in-memory-web-api': { defaultExtension: 'js' }
};
var packageNames = [
'#angular/common',
'#angular/compiler',
'#angular/core',
'#angular/http',
'#angular/platform-browser',
'#angular/platform-browser-dynamic',
//'#angular/router', // I still use "router-deprecated", haven't yet modified my code to use the new router that came with rc.0
'#angular/router-deprecated',
'#angular/http',
'#angular/testing',
'#angular/upgrade'
];
// add package entries for angular packages in the form '#angular/common': { main: 'index.js', defaultExtension: 'js' }
packageNames.forEach(function(pkgName) {
packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
});
var config = {
map: map,
packages: packages
};
// filterSystemConfig - index.html's chance to modify config before we register it.
if (global.filterSystemConfig) { global.filterSystemConfig(config); }
System.config(config);
})(this);
Then, in your gulpfile.js you would build a bundle like this (using the info from system.config.js and tsconfig.json files):
var gulp = require('gulp'),
path = require('path'),
Builder = require('systemjs-builder'),
ts = require('gulp-typescript'),
sourcemaps = require('gulp-sourcemaps');
var tsProject = ts.createProject('tsconfig.json');
var appDev = 'dev/app'; // where your ts files are, whatever the folder structure in this folder, it will be recreated in the below 'dist/app' folder
var appProd = 'dist/app';
/** first transpile your ts files */
gulp.task('ts', () => {
return gulp.src(appDev + '/**/*.ts')
.pipe(sourcemaps.init({
loadMaps: true
}))
.pipe(ts(tsProject))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest(appProd));
});
/** then bundle */
gulp.task('bundle', function() {
// optional constructor options
// sets the baseURL and loads the configuration file
var builder = new Builder('', 'dist/system.config.js');
/*
the parameters of the below buildStatic() method are:
- your transcompiled application boot file (the one wich would contain the bootstrap(MyApp, [PROVIDERS]) function - in my case 'dist/app/boot.js'
- the output (file into which it would output the bundled code)
- options {}
*/
return builder
.buildStatic(appProd + '/boot.js', appProd + '/bundle.js', { minify: true, sourceMaps: true})
.then(function() {
console.log('Build complete');
})
.catch(function(err) {
console.log('Build error');
console.log(err);
});
});
/** this runs the above in order. uses gulp4 */
gulp.task('build', gulp.series(['ts', 'bundle']));
So, when running "gulp build", you will get the "bundle.js" file with everything you need.
Sure, you also need a few more packages for this gulp bundle task to work:
npm install --save-dev github:gulpjs/gulp#4.0 gulp-typescript gulp-sourcemaps path systemjs-builder
Also, make sure that in your tsconfig.json you have "module":"commonjs".
Here is my tsconfig.json which is used in my 'ts' gulp task:
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
},
"exclude": [
"node_modules",
"typings/main",
"typings/main.d.ts"
]
}
Then, in your html file you only need to include this:
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="dist/app/bundle.js"></script>
And that's it... I got from 600 requests, 4mb in about 5 seconds... to 20 requests, 1.4mb in 1.6 seconds (local development machine). But these 20 requests ~1.4mb in 1.6 seconds also include some other js and css that the admin theme came with plus a few html templates that get required on the first load, I prefer to use external templates - templateUrl: '', instead of inline ones, written in my component.ts file.
Sure, for an app that would have millions of users, this still wouldn't be enough. Also server-side rendering for initial load and cache system should be implemented, I actually managed to do that with angular universal, but on Angular2 beta (took about 200-240 milliseconds to load the initial render of the same admin app that above takes 1.6 seconds - I know: WOW!). Now it's incompatible since Angular2 RC came out, but I'm sure the guys doing universal will get it up to speed soon, specially since ng-conf is coming up. Plus, they're also planing to make Angular Universal for PHP, ASP and a few other - right now it's only for Nodejs.
Edit:
Actually, I've just found out that on NG-CONF they said Angular Universal already supports ASP (but it doesn't support Angular2 > beta.15 :)) ... but let's give them some time, RC just came out a few days ago
I think that your question is related to this one:
My angular 2 app takes a long time to load for first time users, I need help to speed it up
To have something ready for production (and speed it up), you need to package it.
I mean transpiling all files into JavaScript ones and concat them the same way Angular2 does for example. This way you will have several modules contained into a single JS file. This way you will reduce the number of HTTP calls to load your application code into the browser.
I found a simple solution, using browserify & uglifyjs on mgechev's angular2-seed repository
Here's my version:
pacakge.json:
{
...
"scripts": {
"build_prod": "npm run clean && npm run browserify",
"clean": "del /S/Q public\\dist",
"browserify": "browserify -s main public/YourMainModule.js > public/dist/bundle.js && npm run minify",
"minify": "uglifyjs public/dist/bundle.js --screw-ie8 --compress --mangle --output public/dist/bundle.min.js"
},
...
"devDependencies": {
"browserify": "^13.0.1",
"typescript": "^1.9.0-dev.20160625-1.0",
"typings": "1.0.4",
"uglifyjs": "^2.4.10"
}
}
Build your project.
Run: npm run build_prod
It'll create bundle.js & bundle.min.js under public\dist directory.
Edit your index.html file:
Instead of running System.import('YourMainModule')... ,
add <script src="/dist/bundle.min.js"></script>
On the first load of my angular page, systemjs is making more than 500 hundred requests to retrieve every angular2 file in angular2/src directory. In total, the first load downloads more than 4mb and it takes more than 14s to start.
The SystemJs workflows are fairly new and don't have enough research in them for best deployment.
Suggest going back to commonjs + webpack. More : https://basarat.gitbooks.io/typescript/content/docs/quick/browser.html
Here is an example : https://github.com/AngularClass/angular2-webpack-starter
#FreeBird72 Your answer is awesome.
If you want to use SystemJS for development and speed up the production server like I do. Check this out.
NOTE: Only import the components that you use, DO NOT import from the whole package.
Eg: If you want to use Modal from ng2-bootstrap.
import {MODAL_DIRECTIVES} from "ng2-bootstrap/components/modal";
Instead of:
import {MODAL_DIRECTIVES} from "ng2-bootstrap/ng2-bootstrap";
This will import the modal component instead of the whole ng2-bootstrap
Then follow the answer from #FreeBird72
Add this package.json
{
...
"scripts": {
...
"prod": "npm run tsc && npm run browserify",
"browserify": "browserify -s main dist/main.js > dist/bundle.js && npm run minify",
"minify": "uglifyjs dist/bundle.js --screw-ie8 --compress --mangle --output dist/bundle.min.js",
...
},
"devDependencies": {
...
"browserify": "^13.0.1",
"uglifyjs": "^2.4.10",
...
}
...
}
Then you can npm run tsc on development and npm run prod on production server
Also remove System.import(.... from your index.html and change it to <script src="/dist/bundle.min.js"></script>
If you want to stick with SystemJS, you can bundle your app with JSPM. I've had good success with this so far, using JSPM's bundle-sfx command to make single JS files for Angular 2 apps.
There's some useful information in this Gist, and there's a seed project.
I am using AG2 RC version
While using MrCroft's solution with systemjs-builder, i was hitting a lot of issues like:
error TS2304: Cannot find name 'Map'
error TS2304: Cannot find name 'Promise'...
After many tries, i added:
///<reference path="../../typings/index.d.ts" />
into my boot.ts and now I got my bundle file compiled.
The Angular command line interface now supports bundling (with tree-shaking to strip out unused code from imports), minification, and ahead-of-time template compilation, which not only hugely minimises the number of requests made, but also makes the bundle very small. It uses WebPack underneath.
It's incredibly easy to make production builds with it:
ng build --prod --aot
https://github.com/angular/angular-cli
Every time I install any dependency using bower is including all my dependencies into my index.html this is perfect!
The problem:
It's returning all my files separately causing to many unnecesary HTTP calls. I need to concatenate all my bower dependencies into one file, so I can eventually minify it and apply HTTP compression.
any ideas?
var options = {
bowerJson: config.bower.bowerJson,
directory: config.bower.directory,
ignorePath: config.bower.ingnorePath
};
gulp.task('wiredep', function () {
'use strict';
log('Injectin Bower components into the Layout page');
var options = config.getWiredConfiguration();
var wiredep = require('wiredep').stream;
return gulp
.src(config.layout + 'index.cshtml')
.pipe(wiredep(options))
.pipe($.inject(gulp.src('js/layout/layout.js')))
.pipe(gulp.dest(config.layout));
});
It's a quite old question, but I have a solution which works for me and should work for the others.
Firstly, we have to understand how wiredep works. It's not as obvious as I thought before, because wiredep by default operates on a file to which you are injecting. A typical implementation is as follows:
var wiredep = require('wiredep').stream;
gulp.task('bower', function () {
gulp.src('./src/footer.html')
.pipe(wiredep({
ignorePath: '../'
}))
.pipe(gulp.dest('./dest'));
});
Take a look at the require part, where the stream function is assigned to a wiredep variable. Since this moment, you are using only the stream function which in fact does not return a stream of bower components as you may thought. wiredep now operates on a file passed to pipe, which in the above example is footer.html and the output of the pipe will still be footer.html, but modified by wiredep. That's why you end up with all.js containing an index.cshtml. It is a pipe chaine like below:
bower_components
|
V
"src/footer.html" ===> wiredep.stream() ===> gulp.dest() ===> "dest/footer.html"
At this point, we should ask two questions: how to obtain a list of files which wiredep uses and how to use them. Thankfully, there are answers to them.
How to obtain a list of files
It's a rather simple task. Firstly, modify the require function call to include the whole library: var wiredep = require('wiredep');. Since then, you can use two additional fields provided by wiredep: wiredep().js - get JS files from bower_components, wiredep().css get CSS files from bower_components.
How to use them
To finish this task, I use gulp-inject which is perfect for this kind of jobs, and of course gulp-concat. If you don't have then, just install them by NPM (npm install --save-dev gulp-inject gulp-concat) and add a dependency to your gulpfile.
If your example index.html looks as follows:
<html>
<head>
<title>Hello World!</title>
<!-- inject:css -->
<!-- endinject -->
</head>
<body>
Hello World!
<!-- inject:js -->
<!-- endinject -->
</body>
</html>
Your gulpfile will look something like this:
var gulp = require('gulp');
var inject = require('gulp-inject');
var concat = require('gulp-concat');
var wiredep = require('wiredep');
gulp.task('bower', injectBower);
function injectBower() {
var target = gulp.src('./html/index.html');
var js = gulp.src(wiredep().js);
var css = gulp.src(wiredep().css);
return target
.pipe(inject(js.pipe(concat('bower.js')).pipe(gulp.dest('./scripts'))))
.pipe(inject(css.pipe(concat('bower.css')).pipe(gulp.dest('./styles'))))
.pipe(gulp.dest('./html'));
}
And now, after you run gulp bower, your index.html should look like this:
<html>
<head>
<title>Hello World!</title>
<!-- inject:css -->
<link rel="stylesheet" href="styles/bower.css"/>
<!-- endinject -->
</head>
<body>
Hello World!
<!-- inject:js -->
<script src="scripts/bower.js"></script>
<!-- endinject -->
</body>
</html>
Gulp will create the concatenated JS file in the scripts directory and the concatenated CSS file in the styles directory. You can freely customize this process; for more information, visit the gulp-inject page. gulp-inject is quite flexible tool, thus you should be able to achieve expected results. In my case, I have also gulp-uglify and gulp-rev appended when building the production environment.
If you have any questions, just ask.
Sounds like you need gulp concat
This will be the next step in your gulpfile.js
var options = {
bowerJson: config.bower.bowerJson,
directory: config.bower.directory,
ignorePath: config.bower.ingnorePath
};
gulp.task('wiredep', function () {
'use strict';
log('Injectin Bower components into the Layout page');
var options = config.getWiredConfiguration();
var wiredep = require('wiredep').stream;
return gulp
.src(config.layout + 'index.cshtml')
.pipe(wiredep(options))
.pipe($.inject(gulp.src('js/layout/layout.js')))
.pipe(concat('all.js'))
.pipe(gulp.dest(config.layout));
});
Or maybe a seperate scripts task:
var concat = require('gulp-concat');
gulp.task('scripts', function() {
return gulp.src('./lib/*.js')
.pipe(concat('all.js'))
.pipe(gulp.dest('./dist/'));
});
here's the scenacrio.
Let's say I habe a main app with different sub-apps inside (or bundles in symfony world). Each app has own scripts and styles, independent from the other. These sub apps should as less coupled as possible because they're more coming or can be removed anytime.
App-Dir
style (main-app)
scripts (main-app)
subapps
app1
style
script
gulpfile.js
app2
style
script
gulpfile.js
dist (target
maincss.css (mainapp)
mainjs.js (mainapp)
subapp1
style.css (app1 style)
script.js (app1 js)
.....
gulpfiles.js
Each gulpfile should be self concerned because they can have different build requirements (less or plain, minify or not, ....)
I'm trying to implement a sceanrio where the main gulpfile calls all subapp gulpfiles with a target directory. Each sub-gulpfile generates it's files and copies it to the target directory.
Can you show me a nice way to accomplish this?
I found chug (https://www.npmjs.com/package/gulp-chug) but when I read along I found a discussion that this is not the right way.
I couldn't find an approach with require which is fullfills my black-box approch.
thx
You could try something like this or at least it will point you in the right direction:
main gulpfile.js
require('./gulp');
require('./app1/gulp');
require('./app2/gulp');
your gulp folder(s) would look like this
gulp
tasks
task1.js
task2.js
index.js
index.js would then require your tasks which can be specific to each app
var fs = require('fs');
var path = require('path');
var onlyScripts = function(name) {
return /(\.(js)$)/i.test(path.extname(name));
};
var tasks = fs.readdirSync('./gulp/tasks/').filter(onlyScripts);
tasks.forEach(function(task) {
require('./tasks/' + task);
});
an example of as task inside the task folder
var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync');
var autoprefixer = require('gulp-autoprefixer');
gulp.task('styles', function () {
return gulp.src([src-of-this-app])
.pipe(sass({
sourceComments: 'map',
sourceMap: 'sass',
outputStyle: 'nested'
}))
.pipe(autoprefixer("last 2 versions", "> 1%", "ie 8"))
.pipe(gulp.dest([dest-of-this-app]))
.pipe(gulpif(browserSync.active, browserSync.reload({ stream: true })));
});
this way you can separate your task into different folders for each app