1.0.0-rc.1 • Published 4 years ago

vite-plugin-import-context v1.0.0-rc.1

Weekly downloads
29
License
MIT
Repository
github
Last release
4 years ago

vite-plugin-import-context

English | 中文

npm node

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

paramtypedefaultdescription
includestring / RegExp / (string / RegExp)[] / null / undefined['**/*.js', '**/*.ts', '**/*.tsx', '**/*.jsx']Code directory and file format to be converted
excludestring / 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,

paramtypedefaultdescription
dirstring./File path to be imported, support alias
deepbooleanfalseWhether to introduce deeply
enabledbooleantrueWhether to convert the code, an empty function will be returned after closing
deepbooleanfalseWhether to introduce deeply
regexpregexp/^\.\//File matching regular
dynamicImportbooleanfalseWhether to enable dynamic import
extbooleantrueWhether the key value has a suffix
ignoreCurrentFilebooleantrueWhether 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