0

TypeScriptで書いたコードをWebpackでバンドル化し、パッケージの中に定義したオブジェクトに
HTMLのスクリプトから設定値をセットしたいと考えています。

構成は以下の状態です。

html

<script src="dist/bundle.js"></script>
<script type ="text/javascript" src="./item/SOME_OBJECT.js"></script>
<!--  myLib.SOME_OBJECT = { "aaa": "bbbb", "cccc": "dddd" } -->

<script type="text/javascript">
    $(window).load(() => {
        myLib.sampleAlert.showSomeObject(); 
        <!-- この中で呼びされるSOME_OBJECTは 
        SOME_OBJECT.jsでセットした値になって欲しいがObject{}になる -->
    })
</script>

index.ts

import { sampleAlert as _sampleAlert } from "./sampleAlert";
import { SOME_OBJECT } from "./SomeObject";
const sampleAlert: _sampleAlert = new _sampleAlert();
export {sampleAlert , SOME_OBJECT};

sampleAlart.ts

import { Message } from "./Message";
import { SOME_OBJECT } from "./SomeObject";

export class sampleAlert {
  public showSomeObject() {
    console.log(SOME_OBJECT);
  }
}

SomeObject.ts

export let SOME_OBJECT: Object = {};

webpack.config.js

module.exports = {
    mode: "development",

    entry: "./src/index.ts",
    devtool: 'source-map',
    output: {
        library: "myLib",
        libraryTarget: 'umd',
        filename: 'bundle.js'
    },

    module: {
        rules: [
            {
                test: /\.ts$/,
                use: "ts-loader",
                exclude: /node_modules/
            }
        ]
    },
    resolve: {
        extensions: [
            ".ts", ".js"
        ]
    }
};

どうすれば./item/SOME_OBJECT.jsに記載した内容をバンドル内部のSomeObject.ts のSOME_OBJCTにセットすることができますか?

1 件の回答 1

1

一つの方法は、SomeObject.tsからSOME_OBJECTを書き換える関数を提供することです。

SomeObject.ts

export let SOME_OBJECT: Object = {};

export function setSomeObject(newObj: Object) {
    SOME_OBJECT = newObj;
}

index.tsからもexportして外部から使えるようにします。

index.ts

import { sampleAlert as _sampleAlert } from "./sampleAlert";
import { SOME_OBJECT, setSomeObject } from "./SomeObject";
const sampleAlert: _sampleAlert = new _sampleAlert();
export {sampleAlert , SOME_OBJECT, setSomeObject};

そして、使う側はSOME_OBJECTを書き換えたいときにsetSomeObjectを呼び出します。

myLib.setSomeObject({ "aaa": "bbbb", "cccc": "dddd" });

実は、これでちゃんとSOME_OBJECTが書き換わります。sampleAlart.tsなどを見るとすでにSOME_OBJECTはインポート済みなのにとお思いになるかもしれませんが、SOME_OBJECTの大元が書きかわれば、インポート済みのSOME_OBJECTも書き換わります。

これでうまく動くはずですが、さすがにあとからSOME_OBJECTが書き換わるのが気持ち悪いという場合は、SOME_OBJECTを直にエクスポートする代わりに、内部に保存されているSOME_OBJECTの値を得るgetSomeObject()みたいな関数をエクスポートするという手もあります。


上記の方法がおすすめですが、一応もう一つの方法を紹介しておきます。それは、SOME_OBJECTをグローバル変数にマップする方法です。webpackのexternalsの設定を用いると、特定のモジュール名の中身として特定のグローバル変数を参照させることができます。まず、webpack.config.jsに以下のように設定します。

module.exports = {
  // ...中略...
  externals: {
    'SOME_OBJECT': '_myLib_SOME_OBJECT',
  },
};

これは、_myLib_SOME_OBJECTというグローバル変数をSOME_OBJECTというモジュールの中身として扱ってくださいということです。

SOME_OBJECTを使う側はこのようにします。(TypeScriptということなので、SOME_OBJECTモジュールに対する型定義を適当にでっち上げる必要がありますが省略します。)

import SOME_OBJECT from 'SOME_OBJECT';

外側からこのSOME_OBJECTをセットする場合は、グローバル変数に代入します。

_myLib_SOME_OBJECT = { "aaa": "bbbb", "cccc": "dddd" };
1
  • 型定義の方法がまずいのか、下の方法はうまくいきませんでしたが上の方法で解決できました。
    – noriokaki
    2018年10月25日 0:25

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。