如何使用Webpack將Typescript庫綁定到JS腳本

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命令時，我會縮小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錯誤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 個解決方案

解決方案1
1 已采納 2017-11-22 10:47:52

如何使用Webpack將Typescript庫綁定到JS腳本

問題描述

1 個解決方案

解決方案1 1 已采納 2017-11-22 10:47:52

解決方案1
1 已采納 2017-11-22 10:47:52