Menu
I'm sure I'm missing something completely trivial here, but for the life of it I can't figure it out. Only recently have I started using AMD (RequireJS). My app will (would) run in browsers.
In TypeScript 1.8, it's possible to tsc an entire project composed of external modules into a single output file when using AMD.
For this reason, I finally decided to leave internal modules behind and make all of my VS2015 project .ts and .tsx files external modules, then compile them into a single file with the following compiler arguments:
--module AMD --outFile main.js
The single output main.js file is created as expected, listed in it are all modules which are part of the project:
main.js
define("Project/MainModule", ["require", "exports" ...], function (require, exports ...) {
"use strict";
console.log("MainModule defined");
// ...
});
...
Now, how do I get Project/MainModule to run from -- for example -- index.html (so that it logs "MainModule defined" into console)? I have RequireJS loaded to handle the AMD syntax, as well as the main.js file specified for immediate loading:
index.html
<script data-main="main" src="Require.js"></script>
This correctly loads main.js, which I ensured by including a call to console.log after the huge list of defines in that file (outside modules). Pardon me if this is a trivial question, I couldn't find anything concerning how to use a compiled application with this approach (maybe I didn't use the right keywords?).
Edit: I tried requiring the module by its name:
index.html
<script>
window.onload = function () {
require(["Project/MainModule"], function () {
// this
});
}
</script>
... but it's no good, RequireJS can't find the module.
569
To compile to a single file with TypeScript, we remove the module option and add the outFile option in tsconfig. json . in tsconfig. json .
TypeScript provides a command-line utility tsc that compiles (transpiles) TypeScript files ( . ts ) into JavaScript. However, the tsc compiler (short for TypeScript compiler) needs a JSON configuration file to look for TypeScript files in the project and generate valid output files at a correct location.
How to compile to a single file with TypeScript? To compile to a single file with TypeScript, we remove the module option and add the outFile option in tsconfig.json.
Typically the first step in any new TypeScript project is to add a tsconfig.json file. A tsconfig.json file defines the TypeScript project settings, such as the compiler options and the files that should be included. To do this, open up the folder where you want to store your source and add a new file named tsconfig.json.
VS Code ships with a recent stable version of the TypeScript language service and uses this by default to provide IntelliSense in your workspace. The workspace version of TypeScript is independent of the version of TypeScript you use to compile your *.ts files.
Procedure 1: This typescript file greet.ts will create a javascript file at runtime with the same name. To run any typescript file there are a few ways: Step 1: First, run the typescript file with the following command.
You should be loading the built file via a script tag:
<head>
<script src="bower_components/dojo/dojo.js"></script>
<script src="built/run.js"></script>
</head>
Then you can load the modules using require:
<body>
<script>require(["app"], run => run());</script>
</body>
The tsconfig.json:
{
"compilerOptions": {
"declaration": false,
"module": "amd",
"target": "es5",
"noImplicitAny": true,
"sourceMap": false,
"out": "./built/run.js",
"moduleResolution": "node"
},
"exclude": [
"bower_components"
]
}
See https://github.com/ca0v/ags-lab/blob/master/index.html for a dojo example.
See https://github.com/ca0v/react-lab/blob/master/rawgit.html for a requirejs example.
See https://github.com/ca0v/html-playground/blob/master/playground/svg/svgeditor/index.html for an almond example.
Alternatively, you can use data-main to load a requirejs configuration. That configuration can specify the built script as a dependency. For example:
requirejs.config({
paths: {
"openlayers": "bower_components/ol3/ol",
"jquery": "bower_components/jquery/dist/jquery.min"
},
deps: ["built/run"],
callback: () => {
requirejs(["app"], run => run());
}
});
And load this using data-main:
<head>
<script src="bower_components/requirejs/require.js" data-main="config.js"></script>
</head>
See https://github.com/ca0v/ol3-lab/blob/master/index.html
191
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
