Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up

Unified utils for auto importing APIs in modules.

License

NotificationsYou must be signed in to change notification settings

unjs/unimport

Repository files navigation

npm versionnpm downloadsCodecov

Unified utils for auto importing APIs in modules, used innuxt andunplugin-auto-import

Features

  • Auto import register APIs for Vite, Webpack or esbuild powered byunplugin
  • TypeScript declaration file generation
  • Auto import for custom APIs defined under specific directories
  • Auto import for Vue template

Install

# npmnpm install unimport# yarnyarn add unimport# pnpmpnpm install unimport

Usage

Plugin Usage

Powered byunplugin,unimport provides a plugin interface for bundlers.

Vite / Rollup

// vite.config.js / rollup.config.jsimportUnimportfrom'unimport/unplugin'exportdefault{plugins:[Unimport.vite({/* plugin options */})]}

Webpack

// webpack.config.jsimportUnimportfrom'unimport/unplugin'module.exports={plugins:[Unimport.webpack({/* plugin options */})]}

Programmatic Usage

// ESMimport{createUnimport}from'unimport'// CommonJSconst{ 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())'))

Configurations

Imports Item

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

Will be injected as:

import{useStateasuseSignal}from'react'import{ref}from'vue'
Default import
imports:[{name:'default',as:'_',from:'lodash'}]

Will be injected as:

import_from'lodash'
Namespace import
imports:[{name:'*',as:'_',from:'lodash'}]

Will be injected as:

import*as_from'lodash'
Export assignment import

This is a special case for libraries authored withTypeScript'sexport = syntax. You don't need it the most of the time.

imports:[{name:'=',as:'browser',from:'webextension-polyfill'}]

Will be injected as:

importbrowserfrom'webextension-polyfill'

And the type declaration will be added as:

constbrowser:typeofimport('webextension-polyfill')
Custom Presets

Presets are provided as a shorthand for declaring imports from the same package:

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

Will be equivalent as:

imports:[{name:'ref',from:'vue'},{name:'reactive',from:'vue'},// ...]
Built-in Presets

unimport also provides some builtin presets for common libraries:

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

You can check outsrc/presets for all the options available or refer to the type declaration.

Exports Auto Scan

Sinceunimport v0.7.0, we also support auto scanning the examples from a local installed package, for example:

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

This will be expanded into:

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

Theignore option is used to filter out the exports, it can be a string, regex or a function that returns a boolean.

By default, the result is strongly cached by the version of the package. You can disable this by settingcache: false.

Type Declarations

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

Directory Auto Import

Unimport.vite({dirs:['./composables/*',]})

Scan for modules under./composables and auto-import the named exports.

Nested Directories

Unimport.vite({dirs:['./composables/**/*',{glob:'./composables/nested/**/*',types:false// disable scan the type declarations}]})

Named exports for modules under./composables/**/* will be registered for auto imports, and filter out the types in./composables/nested/**/*.

Directory Scan Options

You can also provide custom options for directory scan, for example:

Unimport.vite({dirsScanOptions:{filePatterns:['*.ts'],// optional, default `['*.{ts,js,mjs,cjs,mts,cts}']`, glob patterns for matching filesfileFilter:file=>file.endsWith('.ts'),// optional, default `() => true`, filter filestypes:true,// optional, default `true`, enable/disable scan the type declarationscwd:process.cwd(),// optional, default `process.cwd()`, custom cwd for directory scan},dirs:['./composables/**/*',{glob:'./composables/nested/**/*',types:false}]})

Opt-out Auto Import

You can opt-out auto-import for specific modules by adding a comment:

//@unimport-disable

It can be customized by settingcommentsDisable:

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

Acorn Parser

By default,unimport uses RegExp to detect unimport entries. In some cases, RegExp might not be able to detect all the entries (false positive & false negative).

We introduced a new AST-based parser powered byacorn, providing a more accurate result. The limitation is when using Acorn, it assumes all input code are valid and vanilla JavaScript code.

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

Vue Template Auto Import

In Vue's template, the usage of API is in a different context than plain modules. Thus some custom transformations are required. To enable it, setaddons.vueTemplate totrue:

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

Caveats

When auto-import a ref, inline operations won't be auto-unwrapped.

exportconstcounter=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>

We recommend usingVolar for type checking, which will help you to identify the misusage.

Vue Directives Auto Import and TypeScript Declaration Generation

In Vue's template, the usage of directives is in a different context than plain modules. Thus some custom transformations are required. To enable it, setaddons.vueDirectives totrue:

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

Library Authors

When including directives in your presets, you should:

  • provide the corresponding imports withmeta.vueDirective set totrue, otherwise,unimport will not be able to detect your directives.
  • use named exports for your directives, or use default export and useas in the Import.
  • setdtsDisabled totrue if you provide a type declaration for your directives.
importtype{InlinePreset}from'unimport'import{defineUnimportPreset}from'unimport'exportconstcomposables=defineUnimportPreset({from:'my-unimport-library/composables',/* imports and other options */})exportconstdirectives=defineUnimportPreset({from:'my-unimport-library/directives',// disable dts generation globallydtsEnabled:false,// you can declare the vue directive globallymeta:{vueDirective:true},imports:[{name:'ClickOutside',// disable dts generation per importdtsEnabled:false,// you can declare the vue directive per importmeta:{vueDirective:true}},{name:'default',// you should declare `as` for default exportsas:'Focus'}]})

Using Directory Scan and Local Directives

If you add a directory scan for your local directives in the project, you need to:

  • provideisDirective in thevueDirectives:unimport will use it to detect them (will never be called for imports withmeta.vueDirective set totrue).
  • use always named exports for your directives.
Unimport.vite({dirs:['./directives/**'],addons:{vueDirectives:{isDirective:(normalizedImportFrom,_importEntry)=>{returnnormalizedImportFrom.includes('/directives/')}}}})

💻 Development

  • Clone this repository
  • EnableCorepack usingcorepack enable (usenpm i -g corepack for Node.js < 16.10)
  • Install dependencies usingpnpm install
  • Run interactive tests usingpnpm dev

License

Made with 💛

Published underMIT License.

[8]ページ先頭
©2009-2025 Movatter.jp