webpack import http

import Vue from "vue"
console.log(Vue)

类似这样的一行引用模块的代码, webpack构建默认会从本地解析和寻找资源, 那么我们如果有一些远程的资源要怎么引入进项目中?比如类似这样:

import Vue from "https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"
console.log(Vue)

上面直接import url的语法也是可以通过webpack插件实现的, 但是这个不规则的语法会使源码失去通用性, 会带来很多不便。所以我们还是要遵循es module语法, 可以通过module-federation来引入一个远程的模块。

但是module-federation一般只能消费同为module-federation暴露的remoteEntry, 并且模块依赖也和umd等模块规范并不互通, 现有的诸多npm包无法直接使用。

那么能否做到直接引入远程npm的各种包而无需考虑模块规范呢? 可以使用npm-federation这个插件, 这个插件将umd和module-federation的依赖抹平并打通, 可以做到无感知的直接引入各种远程模块使用。

使用方法:

与module-federation一样, 需要完成项目入口改造（详情请看: Module Federation | webpack）, 然后即可简单的使用远程的资源

1. 可以配置插件的baseUrl + remotes
   1. baseUrl // cdn域名
   2. remotes // npm包的path

   3. // webpack.config.js
      const NPMFederation = require("npm-federation")
      new NPMFederation({
        baseUrl: "https://cdn.jsdelivr.net/npm",
        remotes: {
          "@remix-run/router": "@remix-run/router@1.0.3/dist/router.umd.min.js",
          "mf-app-02": {
            package: "mf-app-02@latest/dist/remoteEntry.js",
            global: "mfapp02"
          },
        },
        shared: {react: {}}
      })
      
      // src/bootstrap.js
      import * as remixRouter from "@remix-run/router"

2. 可以只配置插件的remotes
   1. remotes的url配置为https?\:\/\/开头则默认认为这个模块是umd模块
   2. remotes的url配置为.+\@https?\:\/\/开头则默认认为这个模块是module-federation模块

   3. // webpack.config.js
      
      new NPMFederation({
        remotes: {
          "@remix-run/router": "https://cdn.jsdelivr.net/npm/@remix-run/router@1.0.3/dist/router.umd.min.js",
          "mf-app-02": "mfapp02@https://cdn.jsdelivr.net/npm/mf-app-02@latest/dist/remoteEntry.js",
        },
        shared: {react: {}}
      })
      
      // src/bootstrap.js
      import * as remixRouter from "@remix-run/router"