Open wisetc opened 5 years ago
利用 webpack 的require.context方法可以动态的加载制定目录下的文件,该方法的返回值是一个对象,有.keys()方法和构造方法,可以 require 依赖文件。
require.context
.keys()
文件匹配规则用的是/^(?!index).+\.jsx?$/,用于匹配非 index,且以 js 或 jsx 为后缀的文件。require.context的第二个参数表示是否遍历子目录。
/^(?!index).+\.jsx?$/
import path from 'path'; import { kebabCase } from 'lodash'; import UnrentForm from '../pages/unrent/UnrentForm'; import FeeForm from '../pages/unrent/UnrentForm/FeeForm'; // 单独设置的视图 const excludePatternList = [/UnrentForm\.jsx$/i, /FeeForm\.jsx/i, /components/]; let routes = []; const r = require.context('../pages/unrent', true, /^(?!index).+\.jsx?$/); r.keys() .filter(key => !excludePatternList.some(p => p.test(key))) .forEach(key => { const name = path.basename(path.basename(key, '.jsx'), '.js'); routes.push({ exact: true, path: '/' + kebabCase(name), component: r(key).default, requiresAuth: true }); }); routes = routes.concat( [ { exact: false, path: '/unrent-form', component: UnrentForm, requiresAuth: true } ], { exact: true, path: '/unrent-form/fee-form', component: FeeForm, requiresAuth: true } ); export default routes;
利用 webpack 的
require.context
方法可以动态的加载制定目录下的文件,该方法的返回值是一个对象,有.keys()
方法和构造方法,可以 require 依赖文件。文件匹配规则用的是
/^(?!index).+\.jsx?$/
,用于匹配非 index,且以 js 或 jsx 为后缀的文件。require.context
的第二个参数表示是否遍历子目录。