The coffee script code:
class ClassA
constructor: ->
alert ("Hello World")
Generating Javascript code use Web Essentials or Mindscape:
(function() {
var ClassA;
ClassA = (function() {
function ClassA() {
alert("Hello World");
}
return ClassA;
})();
}).call(this);
But when I use http://js2coffee.org/ or http://coffeescript.org/ will be Generating:
var ClassA;
ClassA = (function() {
function ClassA() {
alert("Hello World");
}
return ClassA;
})();
Why a different? How should I generating the second code in VS2012?
Thanks!
The difference between the two versions is simply given by using or not using the top-level function safety wrapper. http://coffeescript.org/#lexical-scope
The default is to use it, so you get the result you see in Visual Studio.
http://js2coffee.org/ and http://coffeescript.org/ use the --bare option.
see http://coffeescript.org/#usage
Related
I have a node.js application with two typescript files.
matchmanager.ts is defined as -
namespace LobbyService
{
export class MatchManager
{
constructor() { /*code*/ }
}
}
and main.ts which is defined as
namespace LobbyService
{
let matchManager: MatchManager = new MatchManager() ;
/* code */
}
I setup visual studio to output the files into a single JS file called lobbyservice.js
However, when i type
node lobbyservice.js
I get the following error -
TypeError: LobbyService.MatchManager is not a constructor
The generated file has this output -
var LobbyService;
(function (LobbyService) {
var matchManager = new LobbyService.MatchManager();
})(LobbyService || (LobbyService = {}));
var LobbyService;
(function (LobbyService) {
var MatchManager = (function () {
function MatchManager() {
console.log("created");
}
return MatchManager;
}());
LobbyService.MatchManager = MatchManager;
})(LobbyService || (LobbyService = {}));
This was working before, but for some odd reason it isn't now. Any thoughts?
Update - I managed to get a version of the lobbyservice.js that works. For some odd reason, Visual studio transforms one version of the file into the one above, and one into this -
var LobbyService;
(function (LobbyService) {
var MatchManager = (function () {
function MatchManager() {
console.log("created");
}
return MatchManager;
}());
LobbyService.MatchManager = MatchManager;
})(LobbyService || (LobbyService = {}));
var LobbyService;
(function (LobbyService) {
var matchManager = new LobbyService.MatchManager();
})(LobbyService || (LobbyService = {}));
//# sourceMappingURL=lobby.js.map
No clue as to why i'm getting two different outputs like that for the same source code. Both projects have the same module property of "none"
So user Elliott highlighted that indeed it's a know typescript compile quirk where the order of the output javascript file creates an issue.
to fix that, i had to add
/// <reference path="matchmanager.ts"/>
On my typescript files that used MatchManager class, even though they were on the same namespace and compiled ok. This forced the typescript compiler to create a workable javascript output.
I have two files, js
(function (Controllers) {
var DialogElement = (function () {
function DialogElement() {
this._template = "include:'Views/Dialog.html'";
}
return DialogElement;
}());
Controllers.DialogElement = DialogElement;
})(Controllers));
and html
<div>Simple dialog!</div>
I want used gulp replaces variable this._template = "include:'Views/Dialog.html'"; on the contents of the html file.
To get so:
function DialogElement() {
this._template = "<div>Simple dialog!</div>";
}
May be there is a plugin suitable for this?
I learned gulp-html2js and gulp-inject, but they work not as expected.
So i make your salf package and and use it as:
gulp.task('inject', function () {
gulp
.src('Controllers/*.js')
.pipe(inject('Views/*.html'))
.pipe(gulp.dest('build'));
});
and chenge controller:
this._template = "{{load path='Views/Dialog.html'}}"
Writing the simplest module we could, we write into hello.js:
var hello = function(){
console.log('hello');
};
exports = hello; \\ Doesn't work on Amazon EC2 Ubuntu Instance nor Windows Powershell
I run Node and require the module
var hello = require('./hello');
hello;
and an empty array {} gets returned when I'm supposed to get [Function].
I tried replacing exports with module.exports, but this doesn't work on my Windows Powershell. It does work on my Amazon EC2 Ubuntu Instance, so why doesn't exports work? Has the API changed? And what could possibly be happening with Powershell that neither of these work?
I know Windows isn't the most desirable development environment, but I can't get my head around such a simple mishap.
EDIT
exporting with ES6 is a little nicer
export const hello = function(){
console.log('hello');
};
importing will look like
import {hello} from './file';
Original answer
You'll want to use module.exports
var hello = function(){
console.log('hello');
};
module.exports = hello;
If just exporting one thing, I'll usually do it all in one line
var hello = module.exports = function() {
console.log('hello');
};
Extras
If you use a named function, in the event an error occurs in your code, your stack trace will look a lot nicer. Here's the way I would write it
// use a named function ↓
var hello = module.exports = function hello() {
console.log("hello");
};
Now instead of showing anonymous for the function name in the stack trace, it will show you hello. This makes finding bugs so much easier.
I use this pattern everywhere so that I can debug code easily. Here's another example
// event listeners ↓
mystream.on("end", function onEnd() {
console.log("mystream ended");
};
// callbacks ↓
Pokemon.where({name: "Metapod"}, function pokemonWhere(err, result) {
// do stuff
});
If you want to export multiple things, you can use exports directly, but you must provide a key
// lib/foobar.js
exports.foo = function foo() {
console.log("hello foo!");
};
exports.bar = function bar() {
console.log("hello bar!");
};
Now when you use that file
var foobar = require("./lib/foobar");
foobar.foo(); // hello foo!
foobar.bar(); // hello bar!
As a final bonus, I'll show you how you can rewrite that foobar.js by exporting a single object but still getting the same behavior
// lib/foobar.js
module.exports = {
foo: function foo() {
console.log("hello foo!");
},
bar: function bar() {
console.log("hello bar!");
}
};
// works the same as before!
This allows you to write modules in whichever way is best suited for that particular module. Yay!
The reason exports is not working is because of the reference conflict. The top variable in each file is module which has a property module.exports. When the module is loaded new variable is created in the background. Something like this happens:
var exports = module.exports;
Obviously exports is a reference to module.exports, but doing
exports = function(){};
forces exports variable to point at function object - it does not change module.exports. It's like doing:
var TEST = { foo: 1 };
var foo = TEST.foo;
foo = "bar";
console.log(TEST.foo);
// 1
Common practice is to do:
module.exports = exports = function() { ... };
I have no idea why it doesn't work under Windows Powershell. To be honest I'm not even sure what that is. :) Can't you just use native command prompt?
I'm trying to use typescript with angularjs in the client-side.
I found if I use external modules, the generated js won't be run in browser.
controllers.ts
/// <reference path="./libs/underscore.d.ts"/>
import _ = module("underscore");
module test {
export class Ctrl {
constructor($scope:any) {
$scope.name = "Freewind";
_.each($scope.name, function(item) {});
}
}
}
The generated js will be:
var _ = require("underscore")
var test;
(function (test) {
var Ctrl = (function () {
function Ctrl($scope) {
$scope.name = "Freewind";
_.each($scope.name, function (item) {
});
}
return Ctrl;
})();
test.Ctrl = Ctrl;
})(test || (test = {}));
Which can't run correctly. But if I remove the module("underscore") part, it will be OK.
Since I have add underscore.js in the HTML, I think it should be something wrong with the require() method. How to fix it?
There are two ways to load stuff in your HTML pages.
Bundling
The first one is to manually include all the script files in your page. You might run some kind of pre-release step to merge and minify your code - but you're taking responsibility for that instead of leaving it to the code to do. This is generally called bundling.
In the case on bundling, you only use references in your TypeScript code (not imports), like this:
/// <reference path="./libs/underscore.d.ts"/>
module test {
export class Ctrl {
constructor($scope:any) {
$scope.name = "Freewind";
_.each($scope.name, function(item) {});
}
}
}
Module loading
If you want to use a module loader, which for The Web is typically RequireJS, you can load External Modules using the import statement. Normally you wouldn't need the reference in this case...
import _ = module("./libs/underscore");
module test {
export class Ctrl {
constructor($scope:any) {
$scope.name = "Freewind";
_.each($scope.name, function(item) {});
}
}
}
RequireJS with non-modules
There is a third scenario, which is quite common. If you intend to import something that isn't an External Module (such as jQuery, but underscore may also fit this pattern), you are better off using a reference and a manual call to RequireJS.
RequireJS will load the dependency for you, so you would wrap your main program with it (which would probably be in a separate file such as app.ts.
///<reference path="./libs/require.d.ts" />
///<reference path="./libs/underscore.d.ts" />
module test {
export class Ctrl {
constructor($scope:any) {
$scope.name = "Freewind";
_.each($scope.name, function(item) {});
}
}
}
require(['underscore'], function (_) {
var ctrl = new test.Crtl({});
});
You can also use require.config to specify the path to underscore in your application.
require.config({
paths: {
"underscore": "libs/underscore"
}
});
When you use require, you asserting that underscore is exported as a loadable module. This further assumes that you are using some sort of module loader system (TypeScript currently supports AMD and CommonJS modules). Since you aren't using a module system, and underscore is simply available in global scope, you can use a /// reference to tell TypeScript that Underscore is available in global scope. Put the following at the top of your file:
/// <reference path="./libs/underscore.d.ts">
And you should be good to go!
I'm having an issue utilizing an external jQuery file with node. I have several functions that I need to run but it isn't working. I created a simple function to test but the error message I keep getting is TypeError: Object # has no method 'alert_helloworld'. Here are my two files:
example.js
var jsdom = require('jsdom');
var templateparser = require('./templateparser.js');
var test = templateparser.alert_helloworld();
templateparser.js
function alert_helloworld(){
console.log("Hello World");
return false;
}
HELP!!!!
You need to use the exports object in templateparser.js:
exports = exports || {};
exports.alert_helloworld = function(){
console.log("Hello World");
return false;
}
Take a look at the modules docs: http://nodejs.org/docs/latest/api/modules.html
module.exports.alert_helloworld = function alert_helloworld(){
console.log("Hello World");
return false;
};
It's important you actually export the functions you need. node.js modules by default are wrapped in their own isolated module scope.