如何使用 webpack 将 typescript 库捆绑到 js 脚本答案

【问题标题】：How to use webpack to bundle typescript library to js script如何使用 webpack 将 typescript 库捆绑到 js 脚本
【发布时间】：2017-11-22 18:47:52
【问题描述】：

我编写了一个简单的 typescript 库，用作 npm 库。看起来是这样的：

index.ts

import * as peselManager from './pesel';

/**
 * Returns information if PESEL number is valid.
 *
 * @param {string} pesel
 * @returns {boolean}
 */
export const isValidPesel = (pesel: string): boolean => {
    return peselManager.isValid(pesel);
};

一切都很好，但我也想将我的库用作 js 脚本。为此，我使用了 webpack，并配置了休闲配置：

var path = require('path');
var UglifyJSPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
    entry: "./lib/index.ts",
    output: {
        filename: "peseljs.min.js",
        path: path.resolve(__dirname, 'dist')
    },
    resolve: {
        extensions: [".ts", ".js"]
    },
    module: {
        loaders: [{ test: /\.ts$/, loader: "ts-loader" }]
    },
    plugins: [
        new UglifyJSPlugin()
    ]
};

当我使用webpack 命令时，我得到了缩小 js 脚本。但是当我像这样将此脚本添加到示例页面时：

<html lang="en">
<head>
    <meta charset="utf-8">

    <title>PeselJS Example</title>
    <meta name="description" content="PeselJS Example Page">
    <meta name="author" content="jaroslawkrol">

    <script type="text/javascript" src="peseljs.min.js"></script>
</head>

<body>
    <span id="some-span">ABC</span>
<script>
    var isValid = isValidPesel("22032101355");
    if(isValid) {
        console.log("valid");
    } else {
        console.log("invalid");
    }
</script>

</body>
</html>

我收到关于 Uncaught ReferenceError: isValidPesel is not defined 的错误。 我的问题：有没有办法捆绑我的库来调用这样的函数？这是一个好习惯吗？也许，我做错了，所以我很高兴听到你的 cmets。

【问题讨论】：

请参考webpack.js.org/guides/typescript链接

标签： javascript typescript webpack

【解决方案1】：

您正在尝试使用已导出的函数，就好像它已附加到全局范围一样。使用 webpack 默认情况并非如此，您的所有代码都将包装在全局范围无法访问的闭包中，除非您将 webpack 配置为实际公开您的顶级导出

为此，请使用library 配置选项https://webpack.js.org/configuration/output/#output-library

output: {
    filename: "peseljs.min.js",
    path: path.resolve(__dirname, 'dist'),
    library: 'myLibraryName'
}

这会将入口模块分配给一个变量（该变量将存在于 webpack lib 加载到的任何范围内 - 在您的情况下为 window），该变量反过来引用您从入口文件导出的任何内容，允许您调用你的功能通过它

const isValid = myLibraryName.isValidPesel("22032101355")

如果您需要更好地控制此库变量的作用域，还有更多库选项可以允许此https://webpack.js.org/configuration/output/#output-librarytarget

【讨论】：