Webpackで作ったパッケージにHTMLのScriptからオブジェクトをセットしたい
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にセットすることができますか?