个人中心
gpt4 book ai didi

javascript - 从 npm 本地导入 ES 模块依赖项，无需捆绑/转译第一方源

转载 作者：行者123 更新时间：2023-12-04 13:10:32 25 4
gpt4 key购买 nike

背景
我正在尝试创建一个“buildless”JavaScript 应用程序，我不需要 watch每次我保存任何源文件时都会运行以转换 JSX、重新捆绑代码等的任务。
它只适用于第一方代码，但是当我尝试 import 时我被卡住了来自 npm 的依赖项。
目标
我想实现这种工作流程:

  • npm install foo (假设它是一个 ES 模块，而不是 CommonJS)
  • 编辑 source/index.js并添加 import { bar } from 'foo'
  • npm run build .某些东西(webpack、rollup、自定义脚本等)运行并捆绑 foo及其依赖于 ./build/vendor.js (没有来自 source/ 的任何内容)。
  • 编辑 index.html添加<script src="build/vendor.js" type="module"...
  • 我可以重新加载 source/index.js在我的浏览器中，和 bar将可用。我不必运行 npm run build直到下一次我添加/删除依赖项。

    • 我已经让 webpack 将依赖项拆分到一个单独的文件中，但是到 import在无构建上下文中从该文件中，我必须 import { bar } from './build/vendor.js .届时 webpack 将不再捆绑 bar ，因为它不是相对导入。
    我也试过 Snowpack ，这在概念上更接近我想要的，但我仍然无法配置它来实现上述工作流程。
    我可以编写一个简单的脚本来从 node_modules 复制文件至 build/ ，但我想使用捆绑软件来实现摇树等功能。不过，很难找到支持这种工作流程的东西。

    最佳答案

    我想出了如何做到这一点，使用 Import Maps 和 Snowpack。
    高层解释
    我用了Import Maps翻译裸模块说明符，如 import { v4 } from 'uuid'进入网址。他们是 currently just a drafted standard ，但在实验标志后面的 Chrome 中受支持，并且有 a shim .
    这样，您就可以使用裸机 import代码中的语句，以便捆绑器能够理解它们并可以正常工作，进行摇树等。但是，当浏览器解析导入时，它会将其视为 import { v4 } from 'http://example.org/vendor/uuid.js' ，然后像普通的 ES 模块一样下载它。
    设置好这些之后，您可以使用任何捆绑器来安装包，但需要对其进行配置以构建单独的包，而不是将所有包合并为一个。 Snowpack在这方面做得非常好，因为它是为非捆绑式开发工作流设计的。它使用 esbuild在底层，它比 Webpack 快 10 倍，因为它避免了不必要地重新构建未更改的包。它仍然会摇树等。
    实现 - 最小示例index.html

    <!doctype html>
    <!-- either use "defer" or load this polyfill after the scripts below-->
    <script defer src="es-module-shims.js"></script>
    <script type="importmap-shim">
    {
      "imports": {
        "uuid": "https://example.org/build/uuid.js"
      }
    }
    </script>

    <script type="module-shim">
      import { v4 } from "uuid";

      console.log(v4);
    </script>
    snowpack.config.js 
    module.exports = {
        packageOptions: {
            source: 'remote',
        },
    };
    packageOptions.source = remote告诉 Snowpack 自己处理依赖项，而不是期望 npm 来处理。
    运行 npx snowpack add {module slug - e.g., 'uuid'}在 snowpack.deps.json 中注册一个依赖项文件，并将其安装在 build文件夹。 package.json 
    "scripts": {
        "build":  "snowpack build"
    }
    每当您添加/删除/更新依赖项时调用此脚本。不需要 watch脚本。
    实现 - 完整示例
    查看 iandunn/no-build-tools-no-problems/f1bb3052 .以下是相关行的直接链接:
  • snowpack.config.js
  • snowpack.deps.json
  • package.json
  • core.php 输出垫片
  • plugin.php - 输出导入图
  • passphrase-generator.js - 导入模块。 (他们在这个例子中被注释掉了，出于这个答案范围之外的原因，只需取消注释它们，运行 bundle 脚本，它们就会工作)。

    • 关于javascript - 从 npm 本地导入 ES 模块依赖项，无需捆绑/转译第一方源，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/65982326/

    25 4 0
    文章推荐： encoding - CDO.Message 编码问题
    文章推荐： perl - 如何在命令行中使用 Perl 来搜索其他程序的输出？
    文章推荐： language-agnostic - 当可以使用库函数代替时，使用 system() 函数是不好的做法吗？为什么？
    文章推荐： Github 操作 : set-output does not seem to work
    行者123
    个人简介

    我是一名优秀的程序员,十分优秀！

    滴滴打车优惠券免费领取
    滴滴打车优惠券
    全站热门文章
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com