Code Monkey home page Code Monkey logo

amd.ts's Introduction

AMD.ts Build Status npm version

AMD.ts is a compact, specialized implementation of AMD meant to support modules emitted by the TypeScript compiler.

Rationale

The TypeScript compiler can emit Javascript code targeting different module formats from the same source, at the moment of writing it supports AMD, SystemJS, CommonJS and ES6 modules.

This is very handy when working on cross-platform (or as they say nowadays, isomorphic) Javascript code bases as it allows the same code to be packaged for all the various environments where it should run.

Usually to support browser environments, though, additional tooling and tedious wiring is required (e.g. Webpack) to "bundle", load and process modules; depending on the size and performance budget of a project, this might translate into unnecessary overhead and headaches.

While the TypeScript compiler is able to "bundle" some module formats (at the time of writing this is possible by using the --outFile option when using AMD or SystemJS as the target module system) functioning as a low-overhead asset manager, it offers no mechanism to load and process its output in a browser environment.

AMD.ts is meant to address that with a small footprint (1K minified, 0.5K gzipped) and minimal overhead.

Usage

There are two ways to use AMD.ts, as a TypeScript source file to be inlined in your tsc output or as an external JavaScript resource.

Inlined

1. Download amd.ts from this repository and place it somewhere in your TypeScript project's path. Alternatively you can install AMD.ts using npm, the file can then be found in node_modules/amd.ts/src/amd.ts.

2. Have a "main" file where to call require to initialize your logic, this is where you would also add a ref comment to ensure the require function is available:

// main.ts
/// <reference path="<PATH_TO>/amd.ts" />
require(['module1', 'module2'], (mod1: any, mod2: any) => /* logic using required modules */);

3. Change your tsconfig.json file to produce a bundle with all your modules and amd.ts:

{
    ...
    "module": "amd",
    "outFile": "<OUTPUT_PATH>.js"
    ...
}

Alternatively pass those options to tsc through the command line.

4. Invoke tsc, the compiler will produce a bundle with all your modules and AMD.ts inlined ready to be used in your web pages.

External Javascript Resouce

AMD.ts is available in compiled form in this repository (minified version), via npm and at npmcdn (minified version).

It can be added to a HTML page using a script tag, then you can either compile your modules as separate files and add them to the page using multiple script tags, or you can create a bundle with the modules as point #3 above shows. In this case make sure AMD.ts is loaded before any module definition or call to require.

License

AMD.ts is open source software and is free for any use under the MIT License

Changelog

Information about the changes across versions in available in the changelog

amd.ts's People

Contributors

federico-lox avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.