Question

当我点击按钮时，我收到以下错误：

index.html：12未捕获的ReferenceError：未定义greet 在HTMLButtonElement.onclick（index.html：12）

似乎webpack或ts-loader生成的javascript代码不正确。有什么想法吗？

这是我的index.ts

＆＃13;

function greet(){
    let p:HTMLElement=document.getElementById("p1")
    p.innerHTML="hello"
}

＆＃13;

这是我的bundle.js

＆＃13;

/******/ (function(modules) { // webpackBootstrap
/******/ 	// The module cache
/******/ 	var installedModules = {};
/******/
/******/ 	// The require function
/******/ 	function __webpack_require__(moduleId) {
/******/
/******/ 		// Check if module is in cache
/******/ 		if(installedModules[moduleId]) {
/******/ 			return installedModules[moduleId].exports;
/******/ 		}
/******/ 		// Create a new module (and put it into the cache)
/******/ 		var module = installedModules[moduleId] = {
/******/ 			i: moduleId,
/******/ 			l: false,
/******/ 			exports: {}
/******/ 		};
/******/
/******/ 		// Execute the module function
/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ 		// Flag the module as loaded
/******/ 		module.l = true;
/******/
/******/ 		// Return the exports of the module
/******/ 		return module.exports;
/******/ 	}
/******/
/******/
/******/ 	// expose the modules object (__webpack_modules__)
/******/ 	__webpack_require__.m = modules;
/******/
/******/ 	// expose the module cache
/******/ 	__webpack_require__.c = installedModules;
/******/
/******/ 	// define getter function for harmony exports
/******/ 	__webpack_require__.d = function(exports, name, getter) {
/******/ 		if(!__webpack_require__.o(exports, name)) {
/******/ 			Object.defineProperty(exports, name, {
/******/ 				configurable: false,
/******/ 				enumerable: true,
/******/ 				get: getter
/******/ 			});
/******/ 		}
/******/ 	};
/******/
/******/ 	// define __esModule on exports
/******/ 	__webpack_require__.r = function(exports) {
/******/ 		Object.defineProperty(exports, '__esModule', { value: true });
/******/ 	};
/******/
/******/ 	// getDefaultExport function for compatibility with non-harmony modules
/******/ 	__webpack_require__.n = function(module) {
/******/ 		var getter = module && module.__esModule ?
/******/ 			function getDefault() { return module['default']; } :
/******/ 			function getModuleExports() { return module; };
/******/ 		__webpack_require__.d(getter, 'a', getter);
/******/ 		return getter;
/******/ 	};
/******/
/******/ 	// Object.prototype.hasOwnProperty.call
/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ 	// __webpack_public_path__
/******/ 	__webpack_require__.p = "";
/******/
/******/
/******/ 	// Load entry module and return exports
/******/ 	return __webpack_require__(__webpack_require__.s = "./src/index.ts");
/******/ })
/************************************************************************/
/******/ ({

/***/ "./src/index.ts":
/*!**********************!*\
  !*** ./src/index.ts ***!
  \**********************/
/*! no static exports found */
/***/ (function(module, exports) {

eval("function greet() {\r\n    var p = document.getElementById(\"p1\");\r\n    p.innerHTML = \"hello\";\r\n}\r\n\n\n//# sourceURL=webpack:///./src/index.ts?");

/***/ })

/******/ });

＆＃13;

这是我的index.html

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<script src="./bundle.js"></script>
<body>
    <p id="p1"></p>
    <button onclick="greet()">Greet </button>
</body>

</html>

＆＃13;

这是我的tsconfig.json

＆＃13;

{
  "compilerOptions": {
    "outDir": "./dist/",
    "noImplicitAny": true,
    "module": "es6",
    "target": "es5",
    "jsx": "react",
    "allowJs": true
  }
}

＆＃13;

这是我的webpack.config.js

＆＃13;

const path = require('path');

module.exports = {
  entry: './src/index.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')
  },
  mode:"development"
};

＆＃13;

Answer 1

您必须将该函数公开为库。在webpack.config.js中扩展输出对象：

output: {
  filename: 'bundle.js',
  path: path.resolve(__dirname, 'dist')
  libraryTarget: 'var',
  library: 'MyLib'
}

然后将函数放在上面名为'library'的静态类中并导出它。

export static class MyLib {
  public static greet() {
    let p: HTMLElement = document.getElementById("p1")
    p.innerHTML = "hello"
  }
}

最后一步是更改html代码中的事件：

<button onclick="MyLib.greet()">Greet </button>

Answer 2

你可以按照@A Loewer的回答做一些事情。但最容易做的就是，

function greet() {
    let p: HTMLElement | null = document.getElementById("p1")
    if(p)
    p.innerHTML = "hello"
}
(<any>window).greet = greet;

现在你的功能在全球范围内。

Webpack和Typescript bundle.js没有运行

2 个答案: