unimport · 包 · UnJS 中文

模块中自动导入 API 的统一工具，用于 nuxt 和 unplugin-auto-import

功能特性

针对 Vite、Webpack 或 esbuild 的自动导入注册 API，由 unplugin 提供支持
TypeScript 声明文件生成
自动导入特定目录下定义的自定义 API
Vue 模板的自动导入

安装

# npm
npm install unimport

# yarn
yarn add unimport

# pnpm
pnpm install unimport

用法

插件用法

由 unplugin 提供支持，unimport 为打包工具提供插件接口。

Vite / Rollup

// vite.config.js / rollup.config.js
import Unimport from 'unimport/unplugin'

export default {
  plugins: [
    Unimport.vite({ /* plugin options */ })
  ]
}

Webpack

// webpack.config.js
import Unimport from 'unimport/unplugin'

module.exports = {
  plugins: [
    Unimport.webpack({ /* plugin options */ })
  ]
}

编程使用

// ESM
import { createUnimport } from 'unimport'

// CommonJS
const { createUnimport } = require('unimport')

const { injectImports } = createUnimport({
  imports: [{ name: 'fooBar', from: 'test-id' }]
})

// { code: "import { fooBar } from 'test-id';console.log(fooBar())" }
console.log(injectImports('console.log(fooBar())'))

配置

导入项

命名导入

imports: [
  { name: 'ref', from: 'vue' },
  { name: 'useState', as: 'useSignal', from: 'react' },
]

将被注入为

import { ref } from 'vue'
import { useState as useSignal } from 'react'

默认导入

imports: [
  { name: 'default', as: '_', from: 'lodash' }
]

将被注入为

import _ from 'lodash'

自定义预设

预设提供了一种从同一包声明导入的简写方式

presets: [
  {
    from: 'vue',
    imports: [
      'ref',
      'reactive',
      // ...
    ]
  }
]

等同于

imports: [
  { name: 'ref', from: 'vue' },
  { name: 'reactive', from: 'vue' },
  // ...
]

内置预设

unimport 也提供了一些用于常用库的内置预设

presets: [
  'vue',
  'pinia',
  'vue-i18n',
  // ...
]

您可以查看 src/presets 获取所有可用选项或参考类型声明。

导出自动扫描

从 unimport v0.7.0 起，我们也支持自动扫描本地安装包中的示例，例如

presets: [
  {
    package: 'h3',
    ignore: ['isStream', /^[A-Z]/, /^[a-z]*$/, r => r.length > 8]
  }
]

这将扩展为

imports: [
  {
    from: 'h3',
    name: 'appendHeader',
  },
  {
    from: 'h3',
    name: 'appendHeaders',
  },
  {
    from: 'h3',
    name: 'appendResponseHeader',
  },
  // ...
]

ignore 选项用于过滤导出项，它可以是字符串、正则表达式或返回布尔值的函数。

默认情况下，结果会根据包的版本进行强缓存。您可以通过设置 cache: false 来禁用此功能。

类型声明

Unimport.vite({
  dts: true // or a path to generated file
})

目录自动导入

dirs: [
  './composables/*'
]

./composables/* 目录下的模块的命名导出将注册为自动导入。

禁用自动导入

您可以通过添加注释来禁用特定模块的自动导入

// @unimport-disable

可以通过设置 commentsDisable 进行自定义

Unimport.vite({
  commentsDisable: [
    '@unimport-disable',
    '@custom-imports-disable',
  ]
})

Acorn 解析器

默认情况下，unimport 使用正则表达式检测未导入的条目。在某些情况下，正则表达式可能无法检测到所有条目（误报 & 漏报）。

我们引入了一个新的基于 AST 的解析器，由 acorn 提供支持，提供更准确的结果。局限性在于使用 Acorn 时，它假定所有输入代码都是有效的原生 JavaScript 代码。

Unimport.vite({
  parser: 'acorn'
})

Vue 模板自动导入

在 Vue 的模板中，API 的使用与普通模块的上下文不同。因此需要进行一些自定义转换。要启用此功能，请将 addons.vueTemplate 设置为 true

Unimport.vite({
  addons: {
    vueTemplate: true
  }
})

注意事项

自动导入 ref 时，内联操作不会自动解包。

export const counter = ref(0)

<template>
  <!-- this is ok -->
  <div>{{ counter }}</div>

  <!-- counter here is a ref, this won't work, volar will throw -->
  <div>{{ counter + 1 }}</div>

  <!-- use this instead -->
  <div>{{ counter.value + 1 }}</div>
</template>

我们推荐使用 Volar 进行类型检查，这将帮助您识别误用。

💻 开发

克隆此仓库
使用 corepack enable 启用 Corepack（对于 Node.js < 16.10，请使用 npm i -g corepack）
使用 pnpm install 安装依赖项
使用 pnpm dev 运行交互式测试

许可

用心制作 💛

根据 MIT 许可证发布。