Question

我在WebStorm中创建了一个HTML5 Boilerplate项目。当我要运行它时，我使用localhost:8080/myproject/src URL。在src文件夹中，我有一个具有以下结构的js文件夹：

libraries
models
    place.model.ts
      place.model.js
    address.model.ts
      address.model.ts
main.ts
  main.js

Typescript编译器将.ts文件转换为.js

在我的.model.ts文件中，我有以下代码：

export class MyClass {
    x: string;
    constructor(x: string) {
        this.x = x;
    }
}

然后在我的main.ts中导入它：

import {MyClass as My} from "./models/myclass.model";

当我尝试运行URL时-出现此错误：Uncaught ReferenceError: exports is not defined。我查看已编译的main.js文件，并看到添加的这一行：

Object.defineProperty(exports, "__esModule", { value: true });

我试图通过在index.html文件中插入以下脚本来解决该问题：

<script>var exports = {};</script>

但是随后我收到了此错误消息：ReferenceError: require is not defined。

我缺少什么，如何使它工作？

更新该项目最初没有tsconfig文件，因此我手动添加了一个。这是内容：

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "sourceMap": false
  },
  "exclude": [
    "node_modules"
  ]
}

我在没有"module": "commonjs"的情况下尝试了此操作，但没有帮助。

Answer 1

就像我第一次尝试使用Webpack一样，我使用的是旧版本的配置。一旦更改了配置，一切都会按预期进行。我还能够为.ts文件更改配置观察程序。

const path = require('path');

module.exports = {
  entry: './src/js/main',
  mode: 'development',
  watch: true,
  watchOptions: {
    aggregateTimeout: 600,
    poll: 1000,
    ignored: /node_modules/
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        loader: 'ts-loader'
      }
    ]
  },
  resolve: {
    extensions: ['.webpack.js', '.web.js', '.ts', '.js', '.tsx', '.json']
  },
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, './src/js')
  }
}

HTML5样板中的“未捕获的ReferenceError：未定义导出”

1 个答案: