Security News
The Unpaid Backbone of Open Source: Solo Maintainers Face Increasing Security Demands
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
unplugin-auto-import
Advanced tools
unplugin-auto-import is a powerful tool for automatically importing functions, components, and other modules in your JavaScript or TypeScript projects. It helps to reduce boilerplate code and improve development efficiency by eliminating the need to manually import frequently used modules.
Automatic Import of Functions
Automatically imports functions from specified libraries (e.g., Vue and Vue Router) without needing to manually import them in each file.
module.exports = {
plugins: [
require('unplugin-auto-import/webpack')({
imports: ['vue', 'vue-router'],
}),
],
};
Custom Imports
Allows you to specify custom imports from libraries like Lodash, so you can use functions like debounce and throttle without manual imports.
module.exports = {
plugins: [
require('unplugin-auto-import/webpack')({
imports: [
{
'lodash': [
'debounce',
'throttle'
]
}
],
}),
],
};
TypeScript Support
Generates TypeScript declaration files for the auto-imported modules, ensuring type safety and better development experience.
module.exports = {
plugins: [
require('unplugin-auto-import/webpack')({
dts: true,
}),
],
};
ESLint Integration
Integrates with ESLint to ensure that auto-imported modules are recognized and do not trigger linting errors.
module.exports = {
plugins: [
require('unplugin-auto-import/webpack')({
eslintrc: {
enabled: true,
},
}),
],
};
babel-plugin-auto-import is a Babel plugin that automatically imports specified modules when they are used in your code. It is similar to unplugin-auto-import but is specifically designed to work with Babel, making it a good choice for projects that already use Babel for transpilation.
eslint-plugin-import is an ESLint plugin that helps manage and validate import statements in your code. While it does not automatically import modules, it provides rules to ensure that imports are correctly used and can help prevent common issues related to imports.
Auto import APIs on-demand for Vite, Webpack, Rollup and esbuild. With TypeScript support. Powered by unplugin.
without
import { ref, computed } from 'vue'
const count = ref(0)
const doubled = computed(() => count.value * 2)
with
const count = ref(0)
const doubled = computed(() => count.value * 2)
without
import { useState } from 'react'
export function Counter() {
const [count, setCount] = useState(0)
return <div>{ count }</div>
}
with
export function Counter() {
const [count, setCount] = useState(0)
return <div>{ count }</div>
}
npm i -D unplugin-auto-import
// vite.config.ts
import AutoImport from 'unplugin-auto-import/vite'
export default defineConfig({
plugins: [
AutoImport({ /* options */ }),
],
})
Example: playground/
// rollup.config.js
import AutoImport from 'unplugin-auto-import/rollup'
export default {
plugins: [
AutoImport({ /* options */ }),
// other plugins
],
}
// webpack.config.js
module.exports = {
/* ... */
plugins: [
require('unplugin-auto-import/webpack')({ /* options */ })
]
}
// nuxt.config.js
export default {
buildModules: [
['unplugin-auto-import/nuxt', { /* options */ }],
],
}
This module works for both Nuxt 2 and Nuxt Vite
// vue.config.js
module.exports = {
configureWebpack: {
plugins: [
require('unplugin-auto-import/webpack')({ /* options */ }),
],
},
}
// quasar.conf.js
const AutoImportPlugin = require('unplugin-auto-import/webpack')
module.exports = {
build: {
chainWebpack (chain) {
chain.plugin('unplugin-auto-import').use(
AutoImportPlugin({ /* options */ })
)
}
}
}
// esbuild.config.js
import { build } from 'esbuild'
build({
/* ... */
plugins: [
require('unplugin-auto-import/esbuild')({
/* options */
}),
],
})
AutoImport({
// targets to transform
include: [
/\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
/\.vue$/, /\.vue\?vue/, // .vue
/\.md$/, // .md
],
// global imports to register
imports: [
// presets
'vue',
'vue-router',
// custom
{
'@vueuse/core': [
// named imports
'useMouse', // import { useMouse } from '@vueuse/core',
// alias
['useFetch', 'useMyFetch'] // import { useFetch as useMyFetch } from '@vueuse/core',
],
'axios': [
// default imports
['default', 'axios'] // import { default as axios } from 'axios',
],
'[package-name]': [
'[import-names]',
// alias
['[from]', '[alias]']
]
}
],
// Generate corresponding .eslintrc-auto-import.json file.
// eslint globals Docs - https://eslint.org/docs/user-guide/configuring/language-options#specifying-globals
eslintrc: {
enabled: false, // Default `false`
filepath: './.eslintrc-auto-import.json', // Default `./.eslintrc-auto-import.json`
globalsPropValue: true // Default `true`, (true | false | 'readonly' | 'readable' | 'writable' | 'writeable')
},
// custom resolvers
// see https://github.com/antfu/unplugin-auto-import/pull/23/
resolvers: [
/* ... */
]
})
Refer to the type definitions for more options.
See src/presets.
Configure options.eslintrc
, and modify your eslint configuration file.
Example:
// .eslintrc.js
module.exports = {
/* ... */
extends: [
// ...
'./.eslintrc-auto-import.json',
],
}
ESLint Docs: Extending Configuration Files
Note:
.eslintrc-auto-import.json
is generated automatically, If the configuration file changes do not take effect in time, please check the configuration file, restart eslint server or the editor
vue-global-api
You can think of this plugin as a successor to vue-global-api
, but offering much more flexibility and bindings with libraries other than Vue (e.g. React).
vue-global-api
is pure runtime) - but hey, we have supported quite a few of them already!MIT License © 2021 Anthony Fu
FAQs
Register global imports on demand for Vite and Webpack
The npm package unplugin-auto-import receives a total of 165,420 weekly downloads. As such, unplugin-auto-import popularity was classified as popular.
We found that unplugin-auto-import demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 4 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
Security News
License exceptions modify the terms of open source licenses, impacting how software can be used, modified, and distributed. Developers should be aware of the legal implications of these exceptions.
Security News
A developer is accusing Tencent of violating the GPL by modifying a Python utility and changing its license to BSD, highlighting the importance of copyleft compliance.