通過帶有依賴項的 jspm 安裝 npm 包

Question

我知道我可以通過運行以下jspm install npm:<pkg-name>帶有jspm的npm包： jspm install npm:<pkg-name>這將允許我在開發中使用它（例如在我的 JS 文件中： import myPackage from 'myPackage'; ）。

如果npm包的package.json文件包含依賴項，我希望它也在包中安裝這些依賴項。 所以在那個包文件夾中，我希望有一個包含包的node_modules文件夾。 但是，當我運行命令來安裝npm包時，它不會安裝node_modules ，我必須手動轉到該文件夾​​並運行npm install才能顯示這些。 這意味着我無法在不手動運行此命令的情況下引用包本身中的其他文件/依賴項。 有什么我可以通過jspm運行來確保這些安裝的嗎？

Answer 1

不，您不能在 JSPM 中執行當前操作，我相信 JSPM 還沒有真正解析 NPM 包。 我認為有這方面的工作，但在我發言時不可用。

我建議你看看下面的 maven 插件：

前端插件

我們已經在多個項目中使用了它，它允許您運行多種不同的安裝風格，以便您可以將您的項目綁定在一起。

您需要從這里安裝 maven 3：

Maven下載

然后你需要一個基本的 pom.xml 來運行 jspm install 和 npm install。 然后，您也可以運行 Karma 測試並從此設置進行編譯。

從文檔：

<execution>
    <id>jspm install</id>
    <goals>
        <goal>jspm</goal>
    </goals>

    <configuration>
        <!-- optional: The default argument is actually
        "install", so unless you need to run some other jspm command,
        you can remove this whole <configuration> section.
        -->
        <arguments>install</arguments>
    </configuration>
</execution>

將開始 jspm 安裝，最后：

<execution>
    <id>npm install</id>
    <goals>
        <goal>npm</goal>
    </goals>

    <!-- optional: default phase is "generate-resources" -->
    <phase>generate-resources</phase>

    <configuration>
        <!-- optional: The default argument is actually
        "install", so unless you need to run some other npm command,
        you can remove this whole <configuration> section.
        -->
        <arguments>install</arguments>
    </configuration>
</execution>

將為您提供 npm 安裝。 這將為您安裝一切，並為您的環境提供一站式服務。 我們已經使用這個工具有一段時間了，它一直被認為是可靠的、靈活的並且將各種工具綁定在一起 - 它也得到了很好的支持。

Answer 2

這是您可以運行的命令列表：

jspm install npm:myDependency
jspm install --no-optionnal
jspm install github:authorGithubAccount/myDependency
npm install myDependency

兩者都有一些依賴性，但並非總是如此，也不在同一結構中。 雖然 jspm 可以處理 node.js 模塊系統。 也許您嘗試添加的依賴項沒有 node_modules。

Answer 3

✌另一種選擇

作為替代方案，我可以建議dynamic-cdn-webpack-plugin ，訣竅是在開發環境中，您的項目中將有node_modules文件夾，對於生產，它將注入來自 cdn 服務器的依賴項。

👍優勢

• 您將獲得緩存優勢。
• 小包大小，因為它將只包含應用程序代碼。

👎缺點

• 它僅適用於webpack 。

作為一個例子，你可以檢查這個項目。