當我使用npm安裝lib時，為什么命名空間會被更改？

Question

我想在項目中使用whammy.js。 第一行源讀取

window.Whammy = (function(){

但是當我運行npm i並查看node_modules時，我看到了

global.Whammy = (function(){

https://github.com/antimatter15/whammy/blob/master/whammy.js

{
...
    "dependencies": {
        "cordova": "^9.0.0",
        "react": "^16.8.5",
        "react-redux": "^5.0.6",
        "redux": "^4.0.1",
        "redux-actions": "^2.2.1",
        "redux-thunk": "^2.2.0",
        "whammy": "0.0.1"
    },
    "devDependencies": {
        "@babel/core": "^7.4.0",
        "@babel/preset-env": "^7.4.2",
        "@babel/preset-react": "^7.0.0",
        "babel-loader": "^8.0.5",
        "copy-webpack-plugin": "^5.0.2",
        "cordova-browser": "^6.0.0",
        "del": "^4.0.0",
        "enzyme": "^3.9.0",
        "enzyme-adapter-react-16": "^1.11.2",
        "enzyme-to-json": "^3.3.5",
        "gulp": "^4.0.0",
        "gulp-cli": "^2.0.1",
        "gulp-jest": "^4.0.2",
        "gulp-run": "^1.7.1",
        "gulp-sass": "^4.0.2",
        "jest-cli": "^24.5.0",
        "jest-dom": "^3.1.3",
        "node-sass": "^4.11.0",
        "react-dom": "^16.8.5",
        "react-testing-library": "^6.0.2",
        "webpack": "^4.29.6",
        "webpack-cli": "^3.3.0",
        "webpack-stream": "^5.2.1"
    },
    "cordova": {
        "plugins": {
            "cordova-plugin-android-permissions": {},
            "cordova-plugin-crosswalk-webview": {
                "XWALK_VERSION": "21+",
                "XWALK_LITEVERSION": "xwalk_core_library_canary:17+",
                "XWALK_COMMANDLINE": "--disable-pull-to-refresh-effect",
                "XWALK_MODE": "embedded",
                "XWALK_MULTIPLEAPK": "true"
            },
            "cordova-plugin-geolocation": {},
            "cordova-plugin-whitelist": {}
        },
        "platforms": [
            "browser"
        ]
    },
    "jest": {
        "verbose": true,
        "globals": {
            "cordova": {}
        },
        "collectCoverageFrom": [
            "source/**/*.{js,jsx,ts,tsx}",
            "!<rootDir>/node_modules/"
        ],
        "coverageThreshold": {
            "global": {
                "branches": 90,
                "functions": 90,
                "lines": 90,
                "statements": 90
            }
        },
        "coverageReporters": [
            "text"
        ],
        "snapshotSerializers": [
            "enzyme-to-json/serializer"
        ]
    }
}

有誰知道這是在做什么/為什么會這樣？ 我對webpack的猜測並不能說服我，因為它沒有達到使用它的程度。

Answer 1

我的猜測是，您正在嘗試在應用程序的前端部分運行npm包（通常是后端的庫）。 這可以解釋為什么作為瀏覽器中的全局對象的window在安裝到global之后會發生變化， global是Node.JS（后端）中的全局對象。

當我看到whammy頁面時，我直接看到前端使用情況（沒有安裝npm）：

<script src="whammy.js"></script>

所以你可以直接下載文件並在你的網站上使用它。