Typescriptプロジェクトをビルドして配布します

Question

私が開発すると、コードが多くのファイルに広がっている、typescriptプロジェクトがあります。

私はそのプロジェクトに単一のjsファイルとdtsファイルを配布したいのですが、それを行うにはどうすればよいでしょうか？

Answer 1

ファイルをパッケージ化する場合、通常、ファイルを1つのファイルにまとめる必要はありません。パッケージマネージャー（NPMなど）を使用すると、ファイルをパッケージにまとめて保存したり、パブリックにすることができます。パッケージには、モジュールを実行するために必要なすべてのファイルが含まれています。

特にTypeScriptの場合、.jsと.d.tsファイルをパッケージ化します。これは、パッケージがTypeScriptとJavaScriptの両方のコンシューマで動作することを意味します。パッケージに.tsファイルを追加しないでください。

ブラウザとノードの両方の環境をターゲットにしている場合、両方の環境で動作するUMDモジュールを使用できます。

実例 - TypeSpec。

注意 - 私は、コンテキストが存在することを確認するために以下のファイル全体を置いていますが、重要なビットは通常1行または2行です。

TypeScript設定ファイル - 重要なビットは「モジュール」種類であり、「宣言」ファイルを発行します。

{ 
    "compileOnSave": true, 
    "compilerOptions": { 
    "target": "ES5", 
    "module": "umd", // <-- 
    "strict": true, 
    "experimentalDecorators": true, 
    "noEmitOnError": false, 
    "noFallthroughCasesInSwitch": true, 
    "noImplicitReturns": true, 
    "sourceMap": true, 
    "removeComments": false, 
    "declaration": true, // <-- 
    "downlevelIteration": true, 
    "noUnusedLocals": true, 
    "noUnusedParameters": false 
    } 
} 

ガルプファイル - これはpackage.jsonとreadmeファイルをincuding、distフォルダにファイルを移動しますが、最も重要なのは、すべてのJavaScriptと型定義の。

var gulp = require('gulp'); 

gulp.task('default', function() { 
    gulp.src('./node_modules/requirejs/require.js') 
     .pipe(gulp.dest('./lib')); 

    // This bit moves type definitions 
    gulp.src('./Scripts/TypeSpec/*.d.ts') 
     .pipe(gulp.dest('./dist/src')); 

    // And this bit moves the JavaScript 
    gulp.src('./Scripts/TypeSpec/*.js') 
     .pipe(gulp.dest('./dist/src')); 

    gulp.src('../README.md') 
     .pipe(gulp.dest('./dist')); 

    gulp.src('./package.json') 
     .pipe(gulp.dest('./dist')); 
}); 

メインソースファイルpackage.jsonファイルのヒントや情報を入力するには、「メイン」と「種類」のセクションに記載されています：

{ 
    "author": "Steve Fenton", 
    "name": "typespec-bdd", 
    "description": "BDD framework for TypeScript.", 
    "keywords": [ 
    "typespec", 
    "typescript", 
    "bdd", 
    "behaviour", 
    "driven" 
    ], 
    "version": "0.7.1", 
    "homepage": "https://github.com/Steve-Fenton/TypeSpec", 
    "bugs": "https://github.com/Steve-Fenton/TypeSpec/issues", 
    "license": "(Apache-2.0)", 
    "files": [ 
    "src/" 
    ], 
    "repository": { 
    "url": "https://github.com/Steve-Fenton/TypeSpec" 
    }, 
    "main": "./src/TypeSpec.js", <-- main file 
    "types": "./src/TypeSpec.d.ts", <-- type information starts here 
    "dependencies": {}, 
    "devDependencies": { 
    "gulp": "^3.9.1", 
    "requirejs": "^2.3.5" 
    }, 
    "optionalDependencies": {}, 
    "engines": { 
    "node": "*" 
    } 
} 

あなたは今、「DIST」フォルダを持っていますあなたがパッケージ化する必要があるファイルだけでNPMに公開することなく試してみることができます。

npm pack