Wondering what’s next for npm?Check out our public roadmap! »

    @xfe-team/babel-plugin-fetch-import

    0.0.4 • Public • Published

    @xfe-team/babel-plugin-fetch-import

    当前插件主要用于让 import 支持 http 引入形式, 就像 Deno 一样

    安装

      npm install @xfe-team/babel-plugin-fetch-import --save-dev
      yarn add @xfe-team/babel-plugin-fetch-import --dev

    配置

    module.exports = {
        entry: {
            // ...
        },
        output: {
            // ...
        },
        module: {
            rules: [{
                test: /\.js|jsx$/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        plugins: [
                             // FBI WARNING: 请确保当前插件在 import 被"编译"前处理
                            '@xfe-team/babel-plugin-fetch-import'
                        ]
                    }
                }
            }]
        },
        // ...
    }

    使用

    仅使用字符串的形式拉取:

      import zepto from 'FETCH:https://cdn.bootcss.com/zepto/1.0rc1/zepto.min.js';
      
      console.log(zepto);
      // 此时返回 zepto 字符串内容

    作为 commonjs 模块拉取:

      import React from 'MODULE:https://unpkg.com/react@16.9.0/umd/react.development.js';
      
      console.log(React);
      // 此时返回 metaFlexible export 的对象

    缓存

    处于性能考虑, 默认情况下对于绝对路径如 https://unpkg.com/react@16.9.0/umd/react.development.js 会优先检查是否已经缓存, 无缓存时发起 http 请求拉去地址内容并缓存起来. 这样的策略是为了防止每一次编译导致都需要阻塞的拉去若干请求, 导致编译过慢.

    由于这个缓存策略, 当前 plugin 也期望请求地址为静态不变的 url 地址, 如果远程请求地址发生变更, 请自行加入参数让当前 plugin 的缓存失效, 如: https://unpkg.com/react@16.9.0/umd/react.development.js?ts=123

    当前缓存均保存在 ${cwd}/node_modules/.cache/@xfe-team/babel-plugin-fetch-import/ 下.

    灵感

    当前插件主要来源于: babel-plugin-import-customized-require
    Deno

    功能补全

    1. 0.0.3 版本中加入了 __extension, 但仍存在用户可能冲突的使用到了这个 query string 参数. 后续应提供可更改 __extension 的配置项
    2. 0.0.3 版本中加入了 __extension, 当前库可以根据返回的 mine-type 自动识别正确的后缀, 尽管这个匹配率不一定会非常高.

    ChangeLog

    0.0.4

    • feat: 修复 import png 等非文本类型文件出错的问题

    0.0.3

    • feat: 针对部分链接存在不存在后缀的, 如 'https://github.com/happy', 使用者可以在使用 __extension=js 来指引当前链接应该使用什么后缀, 如: 'https://github.com/happy?__extension=js'. 这将直接影响 module import 时应该用什么 loader 进行当前url` 解析.

    0.0.2

    • fix: 修复关于 module import 应该携带原 url 后缀, 这样便于其他 loader 进行进一步的解析的问题

    0.0.1

    • init commit

    作者

    She Ailun

    Install

    npm i @xfe-team/babel-plugin-fetch-import

    DownloadsWeekly Downloads

    4

    Version

    0.0.4

    License

    none

    Unpacked Size

    14.1 kB

    Total Files

    8

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar