Question

我正在使用webpack捆绑以打字稿编写的库。该库旨在在客户端上工作。检查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'),
  },
};

我想要的是能够在JavaScript脚本中实例化Grid类，因此在使用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();
});

我希望控制台输出

已构建伦德雷德

但是我得到了

ReferenceError：未定义网格

那问题在哪里？

Webpack +打字稿：保存类类型

0 个答案: