日常

拒绝手动 import,试试 `require.context`

前言

~~水水更健康~~
某群看见 @wit 发了一个 vue-auto,看简介似乎很强,于是乎看了下代码,就是利用 Webpack 的 require.context 实现引入,所以还是得按照大概的约定目录结构才能玩一下,所以其实还是得根据实际情况改造,但并不能阻止我水下这篇(科普)文章!

什么是 Require.context

Webpack 文档:Dependency Management

大概就是能根据某个路径获取相关的文件路径,就像 nodereaddir?嗯,似乎就这么简单!

看看它如何实现自动引入路由

一般 UI 业务逻辑一般放在在 Pages 里,也就差不多对应相关的 Router 了。
遍历 page 下所有 .vue 文件,

pagesContext = require.context('@/pages/', true, /\.vue$/);

可以看到返回的是一个函数,接受一个 req 参数,也就是你想要动态引入的文件路径,调用它就可以得到该文件;至于如何拿到上下文的路径,则提供了一个 key 返回路径数组。
68C54FF8-341B-4FB9-A717-2B215F3AB9D5.png

{default: {…}, __esModule: true}
const componentContext = require.context('@/components/', true, /\.vue$/);
componentContext.keys().forEach(C => {
  Vue.component(
    C.split('/')
      .slice(-1)[0]
      .replace('.vue', ''),
    componentContext(C).default
  );
});

回复

  1. Karina Sit Karina Sit
    Chrome 67 7


    это интересно...

  2. VanLiNef VanLiNef
    Chrome 68 8.1

    descriptive essay outline template http://thabees.online/affordablepapers/cheap-custom-essay-writing-services.html grammar essay checker

This is just a placeholder img.