Я использую webpack для сборки библиотеки, написанной на машинописном тексте. Библиотека предназначена для работы на стороне клиента. После проверки документации веб-пакета я создал следующий тест:
основной класс выглядит следующим образом:
import { RenderService } from "./render.service";
export class Grid {
renderService: RenderService;
constructor() {
console.log("constructed");
this.renderService = new RenderService();
this.renderService.render();
}
}
класс обслуживания рендеринга
export class RenderService{
constructor(){
}
render(){
console.log("renderred");
}
}
tsconfig
{
"compilerOptions": {
"outDir": "./dist/",
"noImplicitAny": true,
"module": "es6",
"target": "es5",
"jsx": "react",
"allowJs": true
}
}
webpack.config. js
const path = require('path');
module.exports = {
entry: './src/ts/via-grid.ts',
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/,
},
],
},
resolve: {
extensions: [ '.tsx', '.ts', '.js' ],
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
};
Я хочу иметь возможность создать экземпляр класса Grid в сценарии javascript, так что то, что я сделал после использования webpack для создания пакета:
index. html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<!--Some content-->>
</body>
<!--Bundeled solution-->
<script src="../dist/bundle.js"></script>
<script src="./script.js"></script>
</html>
Где script. js это просто:
$(document).ready(function () {
var vg = new Grid();
});
, и я ожидал консоли для вывода
Constructed Rendrerred
Но вместо этого я получаю
ReferenceError: Grid is not defined
Так в чем же проблема?