I have my project that use SystemJS (i use a template that comes on this way).
I need to build the final project to production env. I read that i can use systemjs-builder for this. I read the official page: https://github.com/systemjs/builder.
Sorry, i'm so new on Angular 2! I don't understand how to start.
For example, this part:
Basic Use
Ensure that the transpiler is installed separately (npm install babel-core here).
var path = require("path");
var Builder = require('systemjs-builder');
// optional constructor options
// sets the baseURL and loads the configuration file
var builder = new Builder('path/to/baseURL', 'path/to/system/config-file.js');
builder
.bundle('local/module.js', 'outfile.js')
.then(function() {
console.log('Build complete');
})
.catch(function(err) {
console.log('Build error');
console.log(err);
});
What i should to do here? I must to install this package called babel? And after this? I need to create a file with that code? Where? what name must have this file? How i can execute?
Thanks for your help. Please, be patient with a new angular developer!
Related
Am using a react application without router settings. I want to build my sitemap.xml file. I tried some modules like sitemap.js, react-router-sitemap, sitemap-generator. But these module are throwing error as fs module is missing. I installed fs module via npm install --save. But it is still showing the error.
I found in some forums to add the below code in webpack.config file.
node: {
fs: "empty"
}
Am not sure where this file is. I couldn't find them nside the sitemap related modules.
Please help me to resolve this. Am new to react.
Here is my folder structure.
create next.config.js and put below code. It works fine for me.
next.config.js
module.exports = {
webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
// Note: we provide webpack above so you should not `require` it
// Perform customizations to webpack config
// Important: return the modified config
// Example using webpack option
//config.plugins.push(new webpack.IgnorePlugin(/\/__tests__\//))
config.node = {fs:"empty"}
return config
},
webpackDevMiddleware: config => {
// Perform customizations to webpack dev middleware config
// Important: return the modified config
return config
},
}
I have a gulp script that concatenate and minify my JavaScript.
With the gulp-html-replace plugin I can replace all my JS dependancies by the concatened file in my index.html.
I end up with a dev version (/dev/index.html), with all the single JS files included (easier for debugging) and a production version,with all JS concatened (/prod/index.html).
For now I have a config flag (in NodeJS) in a config.js file and I do the following :
res.render(((config.build === 'prod') ? './prod' : './dev') + 'myPage')
But I'm not really happy with this solution as it adds a lot of code and it's easy to forget to write this code.
Is there a better solution ?
Does this solution take place in Gulp
(by havign a gulp prod and a gulp dev for example)
Or does it take place in Node (by setting up a virtual directory for example)
I am new to this npm/gulp/node workflow and not sure of what belongs where
The way I like to do it is by maintaining two separate versions for index.html.
index-development.html for dev environment and index-production.html for production environment.
The index-development.html includes all the scripts and css (non minified and concatenated) and index-production.html as minified and concatenated scripts and css links.
I construct index.html from gulp script.
By default the index-development.html will be deployed.
If I specify parameter p to the gulp script, it will deploy index-production.html
No need to update the file path of the file to be served in your express router.
First do
npm install yargs
In gulp, I include
var argv = require('yargs').argv;
Check if parameter p (gulp -p) is passed to the gulp (p for production) with
var isProduction = argv.p;
and then,
if(isProduction){
taskSequence = ['combineControllers','combineServices','productionsIndex','startServer'];
} else{
taskSequence = ['developmentIndex','startServer'];
}
gulp.task('default', taskSequence);
gulp.task('startServer', function(){
exec('npm start', function (err, stdout, stderr) {
console.log(stdout);
console.log(stderr);
cb(err);
});
});
gulp.task('productionsIndex', function(done) {
return gulp.src('./www/index-productions.html')
.pipe(concat('index.html'))
.pipe(gulp.dest('./public/'));
});
gulp.task('developmentIndex', function(done) {
return gulp.src('./www/index-development.html')
.pipe(concat('index.html'))
.pipe(gulp.dest('./public/'));
});
This way, your index.html file will be constructed dynamically without having to change of the code in your express and you can serve it like
res.render('index');
if you want to user myPage.html everywhere, just replace index.html and index in the code above with myPage.html and myPage.
EDIT:
To start your application in development environment, simply run gulp
To start your application in production environment, simply run gulp -p
Simple!
in your app initialization process you can set the path of your views.
app.set('views', process.cwd() + ((config.build === 'prod') ? '/prod' : '/dev'));
Now you can call the render function like this:
res.render('myPage');
I would like to know how to declare a dependency on an Npm module in Meteor only in test.
While testing a package, I can easily declare a Npm dependency in package.js like this:
Npm.depends({
...
'sinon': '1.15.3'
...
});
But I am only using sinon in test, and I want to make it explicit.
I tried the following with no success.
Package.onTest(function(api) {
// # 1
// can't do this because it is not a meteor module
api.use('sinon');
// # 2
// can't because I have other production Npm dependencies
// and Meteor only allows one `Npm.depends` call per `package.js`.
// Also, not sure if nesting Npm.depends() is allowed at all.
Npm.depends({
'sinon': '1.15.3'
});
});
Any suggestions?
The only way to do this is to wrap sinon into a package and api.use it. You can do the following:
$ meteor create --package sinon
Replace the contents of packages/sinon with the following:
package.js
Package.describe({
summary: 'Standalone test spies, stubs and mocks for JavaScript.'
});
Package.onUse(function(api) {
api.versionsFrom('1.0.4');
api.export('sinon', 'server');
api.addFiles('sinon.js');
api.addFiles('post.js');
});
post.js
sinon = this.sinon;
sinon.js
Download the latest version from here.
Finally in the package you are testing, you can add api.use('sinon'); in your Package.onTest.
As an alternative to making your own package, you can just use one of the community versions available here.
I'm using Gulp and Browserify to package my Javascript into 2 separate bundles: application.js and vendor.js.
How do I bundle the vendor package if my vendor libraries are installed with Bower?
In my gulpfile, I'm using the following modules:
var gulp = require("gulp");
var browserify = require("browserify");
var debowerify = require("debowerify");
var source = require("vinyl-source-stream");
Assuming that I have only the Phaser framework installed with bower (for this example), my Gulp task to create the application package looks like this:
gulp.task("scripts-app", function () {
browserify("./app/javascripts/index.js")
.external("phaser")
.pipe(source("application.js"))
.pipe(gulp.dest("./tmp/assets"));
});
Meanwhile, the vendor task looks like this:
gulp.task("scripts-vendor", function () {
browserify()
.transform(debowerify)
.require("phaser")
.pipe(source("vendor.js"))
.pipe(gulp.dest("./tmp/assets"));
});
When I run this Gulp task, I get an error that states Error: Cannot find module 'phaser' from and then all the directories it search through (none of which are the bower_components directory).
Any ideas about how to package these up successfully are greatly appreciated. Thanks!
Answered my own question:
When using require in the Gulp task, you need to supply a path to a file, not just a name.
gulp.task("scripts-vendor", function () {
browserify()
.transform(debowerify)
.require("./bower_components/phaser/phaser.js")
.pipe(source("vendor.js"))
.pipe(gulp.dest("./tmp/assets"));
});
Notice that require("phaser") became require("./bower_components/phaser/phaser.js").
Doing this works, although the bundle takes forever to build (around 20 seconds). You're probably better of just loading giant libraries/frameworks directly into your app through a <script> tag and then using Browserify Shim.
This let's you require() (in the NodeJS/Browserify sense) global variables (documentation).
Seems like you figured out how to require the bower file. Hopefully you'll only have to bundle it once initially, and not every build. Including the library via a script tag isn't a bad idea. Another technique I'm using is to use scriptjs (a polyfill would work too), to async load whatever vender libraries I need, but make sure to include any/all require's after the script loads. For example, your index.js could be like:
$script.('/assets/vendor', function() {
var phaser = require('phaser');
//rest of code
});
It's especially nice for loading cdn files or having the ability to defer loading certain libraries that aren't necessarily used in the core app by every user, or loading libraries after client-side routing.
is library versioning is supported in nodeJS?
i have folder like package/version/1.0/
and files under this path
test1.js
test2.js
script.js
//access the folder package of version 1.1
var lib = require('require-all')(__dirname + '/package/version/1.0');
test1.js
========
function sum()
{ a+b ;}
exports.sum = sum;
test2.js
========
function sub()
{ a-b ;}
exports.sub = sub;
in script.js file, can require the package/version/1.1 folder. but how can i access the function sum() and sub() in my script file? and is library versioning supported in nodeJS? is the above code is a sort of library versioning ?
First of all, i haven't seen versions of libraries in one package, most common way is to release new versions of packages and upload them online, defining the required version in a package.json dependencies , npm will take care of download & install
If you want to deprecate a certain version of your library online there is npm deprecate which is the right command for that job.
When you create new npm package you can define a main script which will handle the loading of all files inside the package.
Usually its called index.js or main.js and it will be used when someone calls require('<library>');
So you can try the following to achieve the "versioning"
index.js
var fs=require('fs');
var path=require('path');
var _packageJSON=require(__dirname+'/package.json');
var defaultVersion=_packageJSON.version;
module.exports=function(whichVersion){
whichVersion=whichVersion||defaultVersion;
fs.exists(whichVersion,function(_exists){
if(_exists==null){
throw new Error('Unable to load version : '+whichVersion+' : '+_packageJSON.name);
}else{
// require , 1.0/index.js
require(path.join(whichVersion,'index.js'));
}
}
}
and any script that has that package as dependency it can load it by simply calling
require("<library name>")(<version>) ex.
require("mylib")("1.0")
under each version inside the package, you can have index.js which loads/exports variables and functions properly.
The final structure should look like
my npm package main module
index.js file
versions directory
1.0/index.js file
util.js
fn.js
var.js
2.0/index.js file
util.js
fn.js
var.js
Hope it helps.