Webpack и Typescript bundle.js не запущены

Когда я нажимаю кнопку, я получаю следующую ошибку:

index.html: 12 Uncaught ReferenceError: приветствие не определено в HTMLButtonElement.onclick (index.html: 12)

Кажется, что код javascript, сгенерированный webpack или ts-loader, неверен. Любые идеи?

это мой index.ts

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

это мой bundle.js

/******/ (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?");

/***/ })

/******/ });

это мой index.html

<!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>

это мой tsconfig.json

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

это мой webpack.config.js

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"
};

typescript webpack

17.03.2018 13:26

Зод: сила проверки и преобразования данных

Сегодня я хочу познакомить вас с библиотекой Zod и раскрыть некоторые ее особенности, например, возможности валидации и трансформации данных, а также...

Как заставить Remix работать с Mantine и Cloudflare Pages/Workers

Мне нравится библиотека Mantine Component , но заставить ее работать без проблем с Remix бывает непросто.

Угловой продивер

Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.

TypeScript против JavaScript

TypeScript vs JavaScript - в чем различия и какой из них выбрать?

Синхронизация localStorage в масштабах всего приложения с помощью пользовательского реактивного хука useLocalStorage

Не все нужно хранить на стороне сервера. Иногда все, что вам нужно, это постоянное хранилище на стороне клиента для хранения уникальных для клиента...

Что такое ленивая загрузка в Angular и как ее применять

Ленивая загрузка - это техника, используемая в Angular для повышения производительности приложения путем загрузки модулей только тогда, когда они...

840

Ответы 2

вы должны предоставить функцию как библиотеку. Расширьте выходной объект в webpack.config.js:

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

Затем поместите функцию в статический класс с именем «библиотека» выше и экспортируйте его.

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

последний шаг - изменить событие в html-коде:

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

Статические классы в машинописном тексте?

— 17.03.2018 17:15

17.03.2018 14:51

Вы могли бы сделать что-то вроде ответа @A Loewer. Но проще всего сделать это,

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

Теперь ваша функция находится в глобальной области видимости.

17.03.2018 17:31

Другие вопросы по теме

Стили SCSS некорректно загружаются с использованием webpack и angular 5

Vue заменяет HTML комментарием при компиляции с помощью webpack

Переход с Angular 4 на 5 вызывает "Неперехваченная ошибка: метаданные NgModule не найдены"

Как импортировать внешний css внутри файла jsx в React?

Laravel Mix Custom Produce Big JS-файл

Как импортировать библиотеку в компонент vue?

Глобальная переменная с экземпляром vue не определена

Webpack не позволяет d3.csv () загружать данные?

Webpack 4: Как заставить исходные карты CSS работать с LESS?

Не удается установить WebpackDevMiddleware в Windows

Webpack и Typescript bundle.js не запущены

Ответы 2

Другие вопросы по теме

Похожие вопросы