Question

我写了一个简单的打字稿库，我用它作为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命令时，我得到了minify 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的错误消息。 我的问题：有没有办法捆绑我的库来调用这样的函数？这是一个好习惯吗？也许，我做错了，所以我很乐意听到你的意见。

Answer 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

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

1 个答案: