为什么 webpack 不在我的 ts 文件中包含我的函数

Question

我制作了一个全新的 Blazor 服务器端应用程序。我在我的项目文件夹中创建了一个 tsconfig.json 和 JS/src 文件夹。在终端中，我在我的 JS 文件夹中使用了 npm init -y。现在可以安装节点模块。我安装了 webpack 并在我的 JS 文件夹中创建了一个 webpack.config.js 文件。然后我创建一个带有警报功能的简单 ts 文件。在我的项目根目录中配置我的 tsconfig.json 后，我将 <script src="js/bundle.js"></script> 添加到我的 _Layout.cshtml。然后在我的 index.cshtml 页面中，我添加了一个按钮和一些代码来从位于 wwwroot/js/.

的 webpack 中调用已编译的 bundle.js

我在 bundle.js 文件中看不到函数。我做错了什么？

文件夹结构：

tsconfig.json:

{
  "compilerOptions": {
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "ES2017",
    "moduleResolution": "Node"
  },
  "exclude": [
    "node_modules"
  ],
  "include": [
    "./JS/src/*.ts"
  ]
}

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: ['.ts', '.js'],
    },
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, '../wwwroot/js'),
    },
};

index.ts:

function showAlert() {
    alert("this is a test");
}

package.json:

{
  "name": "js",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "ts-loader": "^9.2.6",
    "typescript": "^4.5.5",
    "webpack-cli": "^4.9.2"
  }
}

Answer 1

好吧，经过一番努力，我发现我需要将函数公开为一个库。

在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: ['', '.js', '.ts']
    },
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, '../wwwroot/js'),
        libraryTarget: 'umd',
        library: 'EntryPoint'
    },
};

记下输出部分中的库和库目标。我不完全确定 var umd const 或 let 是否更适合库目标，因为我不确定 UMD 是什么。但是它似乎可以与任何一个一起使用。

这是我更新的 index.ts 文件：

import { Calculator } from "./calculator";

export function showAlert() {
    console.log("Hello world");
    alert("this is a test");
}

export let foo = new Calculator();
let bar = new Calculator();

注意 foo 和 showAlert 如何在前面导出。这是必需的。无法访问栏。

为什么 webpack 不在我的 ts 文件中包含我的函数

Why is webpack not including my function in my ts file

javascript

typescript

webpack

ts-loader

blazor