Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

TypeScriptを使ってNode.jsとブラウザに対応したJSコード(UMD形式)を生成する

More than 3 years have passed since last update.

TypeScriptのソースコードをUMD形式のJavaScriptに生成することで、Node.jsとブラウザの両方に対応することができます。

(補足)UMD (Universal Module Definition)は、JavaScriptのモジュール形式の1つです。UMDは、AMDとCommonJSの両方をサポートしているため、Node.jsでもブラウザでも動かすこどができます。

前提

  • Node.js、TypeScriptがインストールされていること。

サンプル構成

% tree
.
├── README.md
├── index.html
├── package.json
├── src
│   ├── helloModule.ts
│   ├── index.ts
│   └── wordModule.ts
└── tsconfig.json

TypeScriptソースコード

index.tsがNode.jsやブラウザから呼び出すエントリポイントです。helloModuleとwordModule(後述)をインポートし、メソッドを呼び出しています。

src/index.ts
import {Hello} from './helloModule';
import {Word} from './wordModule'; 

Hello.say(); 
let word = new Word();
word.setWord('ES6');
console.log(word.getWord());

helloModuleの実装は以下のとおり。

src/helloModule.ts
export class Hello {
    static say() {
        console.log('Hello TypeScript!');
    }
}

wordModuleの実装は以下の通り。

src/wordModule.ts
export class Word {
    private word: string;

    setWord(word: string) {
        this.word = word;
    }

    getWord() {
        return this.word;
    }
}

TypeScript設定

TypeScriptの設定ファイルを以下のように定義しておきます。moduleとして、"umd"を指定しています。

tsconfig.json
{
  "compilerOptions": {
    "module": "umd",
    "target": "ES5",
    "noImplicitAny": true,
    "outDir": "./js"
  },
  "files": [
    "./src/helloModule.ts",
    "./src/wordModule.ts",
    "./src/index.ts"
  ]
}

コンパイル

以下のコマンドで、TypeScriptのソースコードをES5なJavaScriptに変換します。

tsc -p .

変換結果はjsディレクトリに生成されています。

% ls js
helloModule.js  index.js        wordModule.js

(参考)index.tsの生成結果は以下のような形式です。

js/index.js
(function (factory) {
    if (typeof module === 'object' && typeof module.exports === 'object') {
        var v = factory(require, exports); if (v !== undefined) module.exports = v;
    }
    else if (typeof define === 'function' && define.amd) {
        define(["require", "exports", './helloModule', './wordModule'], factory);
    }
})(function (require, exports) {
    "use strict";
    var helloModule_1 = require('./helloModule');
    var wordModule_1 = require('./wordModule');
    helloModule_1.Hello.say();
    var word = new wordModule_1.Word();
    word.setWord('ES6');
    console.log(word.getWord());
});

Node.jsでの実行

Node.jsの設定ファイルを以下の様に記述してください。

package.json
{
  "name": "ts-sample",
  "version": "1.0.0",
  "description": "",
  "main": "./js/index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

index.jsが実行され、helloModule.jsとwordModule.jsの関数が呼び出されています。

% node .
Hello TypeScript!
ES6

ブラウザでの実行

以下のようなHTMLファイルを用意します。

index.html
<html>
    <head>
        <script type="text/javascript" data-main="js/index.js"
        src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.22/require.js"></script>
    </head>
</html>

これをブラウザで開くと、コンソールに以下が出力されます。

Hello TypeScript! helloModule.js:14
ES6               index.js:15 

参考

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away