README

composer create-project aleks-bar/wp-theme-vite-ts директория-темы

配置

为了正常工作，需要在主题文件夹中执行命令

安装依赖

npm install

初始化主题所需的文件

num run dev или npm run build

系统块

在主题中可以异步加载根据条件在主js文件 index.ts 中定义的js和css块。要创建块，需要在 chunks 目录中添加块文件，同时导入的css文件也会被打包成css块。之后，需要在主js文件中使用 addLazyChunkForApp 方法异步加载块。该方法需要传入应用程序对象 app 以及包含块名称和导入函数的对象。

示例

addLazyChunkForApp( app,
   {
     'chunk-1': () => import('путь/до/чанка-1'),
     'chunk-2': () => import('путь/до/чанка-2'),
   }
)

警告

不能在 import() 内传递变量，因为vite看不到路径并且无法构建块。

但是，在调用方法之前，需要初始化对象 app 的依赖。

app.initDependencies()

之后，为了使块工作，需要在页面的 php 文件中调用头部之前，为 addLazyChunkForApp 方法设置具有相应名称的块名称对象。

示例

Theme::setChunkName('chunk-1');
get_header();

addLazyChunkForApp 方法旨在连接整个页面的全局块，如果需要在某个地方按条件本地连接块，则可以使用 chunkLazy 方法。

它接受第一个参数为返回 import('块路径') 的函数，第二个参数为块名称

它返回一个对象，其中
data - 块加载数据，需要传递给 chunkInit 方法
chunkInit - 在块加载后需要调用的方法，接受块加载数据 data 和应用程序对象 app
chunkLoad - 调用块加载的promise

示例

const { chunkLoad, data, chunkInit } = chunkLazy( () => import('путь/до/чанка'), chunk-1 );
chunkLoad().then( () => chunkInit(data, app) )

aleks-bar / wp-theme-vite-ts

维护者

详细信息

README

配置

系统块