概要
できると便利そうだと思って試してみたけど、
時間が足りず、1ファイルにしなくてもいいことにしました。
中途半端ですがメモとして残します。
背景など
社内向けに、ブラウザで動作するライブラリをTypeScriptで書いています。
(npmで公開するには汎用的じゃなさすぎるやつです)
このライブラリは、外部モジュールとして<script>で読みこませる形式を想定した作りにしています。
また、ライブラリを使う側でもTypeScriptを使いたいので、tscの「declaration」オプションで型定義ファイルを出力しています。
ライブラリのビルド成果物としては、minifyされたjsファイル(+map)ファイルを一つと、
型定義ファイル(d.ts)を1つのtsファイルごとに出力させていたのですが、
一つにまとまっているとライブラリを使う側がシンプルになるかと思ったので、
試してみました。
検証バージョン
webpack: 4.9.1
awesome-typescript-loader: 5.0.0
dts-bundle: 0.7.3
コード
tsconfig.json
(webpackでもオプションつけるので要らないものもありそうだけど、検証時のもの)
{
"compilerOptions": {
"module": "commonjs",
"target": "ES6",
"outDir": "./output",
"declaration": true,
"sourceMap": true,
},
"exclude": [
"node_modules",
"output"
],
}
webpack.config.js
(DtsBundlePluginを使って設定します)
const path = require('path');
const webpack = require('webpack');
var rootDir = path.resolve(__dirname);
// dts-bundleの設定
function DtsBundlePlugin() {}
DtsBundlePlugin.prototype.apply = function(compiler) {
compiler.plugin('done', function() {
var dts = require('dts-bundle');
dts.bundle({
// ライブラリ名
name: 'testtest',
// 入力ファイル名(declarationで出力されるファイルを全て指定)
main: rootDir + '/output/**/*.d.ts',
// 出力ファイル名
out: rootDir + '/output/index.d.ts',
removeSource: true,
outputAsModuleFolder: true
});
});
};
module.exports = {
entry: './src/testtest.ts',
output: {
filename: 'testtest.min.js',
path: path.join(__dirname, './output/'),
library: 'testtest',
libraryTarget: 'umd',
},
module: {
rules: [{
test: /\.tsx?$/,
loader: 'awesome-typescript-loader',
exclude: /node_modules/,
query: {
// tsコンパイル時に、型定義ファイルを出力する
declaration: true,
}
}]
},
devtool: 'source-map',
resolve: {
extensions: [".tsx", ".ts", ".js"],
modules: [
"node_modules",
],
},
plugins: [
new DtsBundlePlugin(),
],
cache: true,
};
結果
webpackを実行すると、./oupputの中にindex.d.tsができて、複数ファイルのclass定義が1ファイルにまとまったのが確認できました。基本的には問題なさそうに見えました。
しかし、成功したのは3つほどのtsファイルで作ったHelloWorld的なプロジェクトで、実際に使っているライブラリにも組み込んでみると、できあがるindex.d.tsが空ファイルになってしまいました。
少し試行錯誤しましたが、無理して1ファイルにしなくてもいいかなと思い直し、今回はdts-bundleは使わないことにしました。活用できればライブラリを使う側の管理が楽になりそうなので、時間があればオプションなど見直したいところです。