I am trying to compile a Haxe class without defining an entry point by using a build hxml file.
My folder structure looks like the following:
root
|
___src
|___Test.hx
|
___build.hxml
Test.hx has the following contents:
package foo;
class BarLib
{
public function new() {}
public function test() {
return "Hello from BarLib!";
}
}
build.hxml looks like this:
-cp src
--macro "include('foo')"
-js test.js
I then run haxe build.hxml from the root folder which creates the file test.js, but its contents is pretty much empty:
// Generated by Haxe 3.3.0
(function () { "use strict";
})();
It seems not to be able to locate the package foo.
What am I doing wrong?
You declare Test.hx to be part of the foo package, however, it's placed in a folder named src. If you move it to src/foo, Haxe produces the following output:
// Generated by Haxe 3.3.0
(function () { "use strict";
var foo_BarLib = function() {
};
foo_BarLib.prototype = {
test: function() {
return "Hello from BarLib!";
}
};
})();
It's also a bit unusual to have a file named Test.hx that doesn't actually define a type named Test. BarLib.hx might be a better name.
You can also use haxe -cp src foo.Test to compile a single class (and its references) without an entry point
Related
My problem is the following:
I use gulp+browserify to compile my TypeScript to JavaScript that you can use on normal HTML pages, the problem is that my class is never available on the browser:
VM633:1 Uncaught ReferenceError: Test is not defined
at <anonymous>:1:13
This is my TypeScript File:
class Test {
public test(): void {
console.log("aa");
}
}
This is my gulpfile
var gulp = require("gulp");
var browserify = require("browserify");
var source = require('vinyl-source-stream');
var tsify = require("tsify");
gulp.task("default", function () {
return browserify({
//basedir: '.',
debug: true,
entries: ['app/Resources/typescript/Test.ts'],
cache: {},
packageCache: {}
})
.plugin(tsify)
.bundle()
.pipe(source('bundle.js'))
.pipe(gulp.dest("web/bundles/framework/js"));
});
The file compiles without problem, and is included in my index.html (the compiled js file).
But when i try:
var t = new Test();
I get the following error:
VM633:1 Uncaught ReferenceError: Test is not defined
at <anonymous>:1:13
I can't resolve it, I have read a lot and I haven't found anything clear, I tried all and nothing worked.
There are a few things missing here:
If you want your class to be accessible outside of your module, you have to export it:
export class Test {
// ...
}
Browserify creates functions on top of the classes you define. So it won't be accessible globally (which is a good thing). Normally you would import it in another file and use it:
// in any TS file that wants to use `Test` class. Make sure this is included in the gulp entries as well
import {Test} from "test";
var t = new Test();
console.log(t);
Or if really want it to be accessible globally, you can attach it to window object:
// In Test.ts file:
(window as any).Test = Test; // This can be useful when debuging. But don't do this in production code.
In TypeScript, I can use RequireJS to import modules:
import Foo = require("common/Foo"); // Foo is one of my TypeScript exported classes.
class Bar {
// Wooohooo! I can use Foo here, complete with intellisense!
new Foo(1, "ab").zanzibar();
}
But sometimes I don't want to load Foo until it's really needed, like once some function is called:
class Bar {
doSomething() {
// OK, now we need Foo. Import it.
require(["common/Foo"], Foo => {
// Use Foo here.
// Uh oh. No intellisense -- where did my static typing disappear to?
new Foo(1, "ab").zanzibar(); // Works at runtime, but no intellisense. :-(
});
}
}
Is there a way to tell TypeScript what type Foo is?
From the Modules in TypeScript documentation (see "Optional Module Loading"):
Sample: Dynamic Module Loading in require.js
declare var require;
import Zip = require('./ZipCodeValidator');
if (needZipValidation) {
require(['./ZipCodeValidator'], (x: typeof Zip) => {
if (x.isAcceptable('...')) { /* ... */ }
});
}
I have RequireJS implemented fine, and a Grunt based build process which is optimizing the all the JS files app into one file via r.js which is also working fine. All my app files are concatenated into one big JS file for efficient production deployment.
Now I'm having the following requirements:
I need to write a plugin for requirejs, that will not load(not include the file) into the optimized file in the build process, but will required on demand:
Meaning in my code I'll have:
var myObj = require("myplugIn!jsFile");
So in the end when this line runs, it will runs in 2 options:
on build process, the file is not included in the optimized file
The application is running, it will be request the file on demand.
I wrote the following plugin, but is not working:
define(function () {
"use strict";
return {
load : function (name, req, onload, config) {
// we go inside here we are running the application not in build process
if (!config.isBuild) {
req([name], function () {
onload(arguments[0]);
});
}
}
};
});
What I'm missing here.
In your build configuration you can exclude files that you don't want to bundle. They will still be loaded on demand when needed. You may also do something like this:
define(function (){
// module code...
if (condition){
require(['mymodule'], function () {
// execute when mymodule has loaded.
});
}
}):
This way mymodule will be loaded only if condition is met. And only once, if you use same module dependency elsewhere it will return loaded module.
It was more simpler that I though, if helps someone, I'm posting the solution, I create a plugin , that in build process return nothing and in run time, returns the required file, hope helps someone.
define(function () {
"use strict";
return {
load : function (name, req, onload, config) {
if (config.isBuild) {
onload(null);
} else {
req([name], function () {
onload(arguments[0]);
});
}
}
};
});
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
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!