# @systemlight/auto-route-webpack-plugin

> Webpack plug-in that traverses the directory to generate information.

Latest version **3.0.2** (published 2022-08-08) · MIT license · 0 weekly downloads

## Install

```sh
npm install @systemlight/auto-route-webpack-plugin
pnpm add @systemlight/auto-route-webpack-plugin
yarn add @systemlight/auto-route-webpack-plugin
bun add @systemlight/auto-route-webpack-plugin
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 3.0.2 |
| Published | 2022-08-08 |
| First published | 2022-08-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Node | >=16.15.0 |
| Dependencies | 3 |
| Unpacked size | 20.8 KB |
| Known vulnerabilities | 0 (+4 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 0 |
| Author | SystemLighht |
| Maintainers | systemlight |
| Keywords | webpack, webpack5, traverses directory, auto route, routes, webpack plugin, generate routes |

## Links

- npm: https://www.npmjs.com/package/@systemlight/auto-route-webpack-plugin
- Repository: https://github.com/SystemLight/webpack-config
- Homepage: https://github.com/SystemLight/webpack-config#readme
- Issues: https://github.com/SystemLight/webpack-config/issues
- npm.io page: https://npm.io/package/@systemlight/auto-route-webpack-plugin

## Dependencies (3)

- [nanoid](https://npm.io/package/nanoid.md) 3.3.4
- [schema-utils](https://npm.io/package/schema-utils.md) ^4.0.0
- [stringify-object](https://npm.io/package/stringify-object.md) 3.3.0

## Alternatives

- [raw-loader](https://npm.io/package/raw-loader.md) — 4.3M weekly downloads
- [plop](https://npm.io/package/plop.md) — 1.4M weekly downloads
- [webpack-deadcode-plugin](https://npm.io/package/webpack-deadcode-plugin.md) — 80.3K weekly downloads
- [@storybook/preact-vite](https://npm.io/package/@storybook/preact-vite.md) — 54.2K weekly downloads
- [vite-plugin-transform](https://npm.io/package/vite-plugin-transform.md) — 2.4K weekly downloads

## Recent versions

- 3.0.2 (latest) — 2022-08-08
- 3.0.0 — 2022-08-07
- 2.0.0 — 2022-08-02
- 1.0.1 — 2022-08-02
- 1.0.0 — 2022-08-02

## README

# @systemlight/auto-route-webpack-plugin

[![NPM version](https://img.shields.io/npm/v/@systemlight/auto-route-webpack-plugin.svg)](https://www.npmjs.com/package/@systemlight/auto-route-webpack-plugin)

> Webpack plug-in that traverses the directory to generate information.

- [灵感来源](https://v3.umijs.org/zh-CN/docs/convention-routing)

## 路由规则

### 默认文件忽略规则

- 以 . 或 _ 开头的文件或目录
- 以 d.ts 结尾的类型定义文件
- 包含 test、spec、e2e 的测试文件（适用于 .js、.jsx 和 .tsx 文件）
- components 和 component 目录
- utils 和 util 目录
- 不是 .js、.jsx、.ts 或 .tsx 文件

### 动态路由

约定 [] 包裹的文件或文件夹为动态路由。

比如：

```
src/pages/users/[id].tsx 会成为 /users/:id
src/pages/users/[id]/settings.tsx 会成为 /users/:id/settings
```

约定 [ $] 包裹的文件或文件夹为动态可选路由

### 嵌套路由

约定目录下有 _layout.tsx 时会生成嵌套路由，以 _layout.tsx 为该目录的 layout

## 使用方法

配置webpack

```javascript
// 内置了一个vue路由渲染器
const {AutoRouteWebpackPlugin, vueRoutesRender} = require('@systemlight/auto-route-webpack-plugin')

module.exports = {
    ...

    plugins: [
      new AutoRouteWebpackPlugin({
        targetPath: './src/views',
        importPath: '@/views',
        loaderTest: /routes\/index\.js$/,
        routesRender: vueRoutesRender
      })
    ]

  ...
}
```

配置vue.config.js

```javascript
const {AutoRouteWebpackPlugin, vueRoutesRender} = require('@systemlight/auto-route-webpack-plugin')

{
  configureWebpack:{
    plugins: [
      new AutoRouteWebpackPlugin({
        targetPath: './src/views',
        importPath: '@/views',
        loaderTest: /routes\/index\.js$/,
        routesRender: vueRoutesRender
      })
    ]
  }
}
```

routes 文件添加标记

```javascript
// https://v3.router.vuejs.org/zh/api/
const router = new VueRouter({
  base: '/',
  mode: 'history',
  routes: [
    // @auto-routes
    {
      name: '404',
      path: '/:pathMatch(.*)',
      alias: '/404',
      component: Code404
    }
  ]
})

export default router
```

## 配置参数

- targetPath：扫描文件的路径，根据此目录下的文件生成路由
- importPath：导入的前缀路径，如@/views
- publicPath：目录的访问前缀
- ignores：通用忽略正则表达式数组
- ignoreFiles：文件忽略正则表达式数组
- ignoreFolders：文件夹忽略正则表达式数组
- renderRoute：渲染路由函数
- loaderTest：用于路由注入位置，文件内需要包含`// @auto-routes`标记用来替换生成的路由

---
_Source: https://npm.io/package/@systemlight/auto-route-webpack-plugin · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._