vite-plugin-import-context

English | 中文

A dynamic import plugin based on vite.Support dynamic import

• 💡 Similar to webpack's require.context
• ⚡️ Support dynamic loading
• 📦 Detailed documentation and examples

Install (yarn or npm)

node version: >=12.0.0

vite version: >=2.0.0-beta.12

yarn add vite-plugin-import-context -D or npm i vite-plugin-import-context -D

Run Example

cd ./examples

yarn install

yarn serve

Usage

• Config plugin in vite.config.ts

import { UserConfigExport } from 'vite';
import vue from '@vitejs/plugin-vue';

import dynamicImport from '../src/index';

export default (): UserConfigExport => {
  return {
    plugins: [vue(), dynamicImport(/*options*/)],
  };
};

• If you are using the ts development environment. Then add the type to tsconfig.json. The corresponding type definition has been configured

{
  "compilerOptions": {
    "types": ["vite-plugin-import-context/client"]
  }
}

Options Description

| param | type | default | description | | --- | --- | --- | --- | | include | string / RegExp / (string / RegExp)[] / null / undefined | ['**/*.js', '**/*.ts', '**/*.tsx', '**/*.jsx'] | Code directory and file format to be converted | | exclude | string / RegExp / (string / RegExp)[] / null / undefined | 'node_modules/**' | Excluded files/folders |

Usage in Code

In the code, if the keyword function importContext appears, it will be transformed by the plugin.

Please ensure that there are no custom importContext functions or variables in your own code

basicExample

This example is non-dynamic import. And no deep recursion

// xxx.ts

const nextMainModule = importContext({
  dir: './',
  deep: false,
  regexp: /\.ts$/,
  dynamicImport: false,
  ignoreCurrentFile: true,
});

nextMainModule.keys().forEach((key) => {
  console.log('nextMain=>', nextMainModule(key));
});

aliasExample

It can be matched according to the alias of vite

// xxx.ts

const aliasModule = importContext({
  dir: '/@/views',
  deep: true,
  regexp: /\.ts$/,
});

aliasModule.keys().forEach((key) => {
  console.log('aliasModule=>', aliasModule(key));
});

deepImportExample

This example is non-dynamic import. And deep recursion

// xxx.ts

const nextMainModule = importContext({
  dir: './',
  deep: true,
  regexp: /\.ts$/,
  dynamicImport: false,
  ignoreCurrentFile: true,
});

nextMainModule.keys().forEach((key) => {
  console.log('nextMain=>', nextMainModule(key));
});

dynamicImportExample

This example is import dynamically. And deep recursion

const dynamicModule = importContext({
  dir: './',
  deep: true,
  regexp: /\.ts$/,
  dynamicImport: true,
});

dynamicModule.keys().forEach((key: string) => {
  console.log('dynamicModule=>', dynamicModule(key));
  dynamicModule(key)().then((res) => {
    console.log('======================');
    console.log('dynamicModuleRes=>', res);
    console.log('======================');
  });
});

ImportContext Parameter description

deep: false, regexp: /.ts$/, dynamicImport: false, ignoreCurrentFile: true,

| param | type | default | description | | --- | --- | --- | --- | | dir | string | ./ | File path to be imported, support alias | | deep | boolean | false | Whether to introduce deeply | | enabled | boolean | true | Whether to convert the code, an empty function will be returned after closing | | deep | boolean | false | Whether to introduce deeply | | regexp | regexp | /^\.\// | File matching regular | | dynamicImport | boolean | false | Whether to enable dynamic import | | ext | boolean | true | Whether the key value has a suffix | | ignoreCurrentFile | boolean | true | Whether to ignore the current file. If dir='./', It will import itself, this configuration can ignore the import of itself |

NOTE

• The plugin draws on the idea of rollup-plugin-require-context。Because the plug-in does not support dynamic import and ts files.So i finished it
• The function must have a variable to accept the return value of the function. Otherwise it will parse error

License

MIT