Update vite multiple input build configuration

This commit is contained in:
mashirozx 2021-07-14 10:04:54 +08:00
parent 4c981aab8e
commit 063b232261
9 changed files with 49 additions and 33 deletions

2
app/assets/.gitignore vendored Normal file
View File

@ -0,0 +1,2 @@
main/
admin/

View File

@ -2,17 +2,16 @@
namespace Sakura\Controllers;
use Sakura\Lib\BaseClass;
/**
* The controller abstract base
* @since 1.0.0
* @license GPLv3
* @author mashirozx <moezhx@outlook.com>
*/
class BaseController
class BaseController extends BaseClass
{
public static $version = SAKURA_VERSION;
public static $text_domain = SAKURA_TEXT_DOMAIN;
/**
* The rest API request parameters
* @since 0.0.1

View File

@ -5,6 +5,9 @@
define('SAKURA_VERSION', wp_get_theme()->get('Version'));
define('SAKURA_TEXT_DOMAIN', wp_get_theme()->get('TextDomain'));
define('SAKURA_DEVEPLOMENT', false);
define('SAKURA_DEVEPLOMENT_HOST', 'http://127.0.0.1:9000');
// PHP loaders
require_once(__DIR__ . '/loader.php');

View File

@ -5,11 +5,8 @@ namespace Sakura\Helpers;
use Sakura\Helpers\ViteHelper;
use Sakura\Controllers\InitStateController;
class AdminPageHelper
class AdminPageHelper extends ViteHelper
{
public static $version = SAKURA_VERSION;
public static $text_domain = SAKURA_TEXT_DOMAIN;
public $page_title;
public $menu_title;
public $menu_slug;
@ -35,16 +32,19 @@ class AdminPageHelper
{
if ("appearance_page_{$this->menu_slug}" === $hook) {
$this->enqueue_common_scripts();
// $this->enqueue_development_scripts();
$this->enqueue_production_scripts();
if (SAKURA_DEVEPLOMENT) {
$this->enqueue_development_scripts();
} else {
$this->enqueue_production_scripts();
}
}
}
public function enqueue_development_scripts()
{
wp_enqueue_script('[type:module]vite-client', ViteHelper::$development_host . '/@vite/client', array(), null, false);
wp_enqueue_script('[type:module]vite-client', self::$development_host . '/@vite/client', array(), null, false);
wp_enqueue_script('[type:module]dev-main', ViteHelper::$development_host . '/src/admin/main.ts', array(), null, true);
wp_enqueue_script('[type:module]dev-main', self::$development_host . '/src/admin/main.ts', array(), null, true);
wp_localize_script('[type:module]dev-main', 'InitState', (new InitStateController())->get_initial_state());
}
@ -52,8 +52,8 @@ class AdminPageHelper
public function enqueue_production_scripts()
{
$entry_key = 'src/admin/main.ts';
$assets_base_path = get_template_directory_uri() . '/assets/dist/';
$manifest = ViteHelper::get_manifest_file();
$assets_base_path = get_template_directory_uri() . '/assets/admin/';
$manifest = self::get_manifest_file('admin');
// <script type="module" crossorigin src="http://localhost:9000/assets/index.36b06f45.js"></script>
wp_enqueue_script('[type:module]chunk-vendors.js', $assets_base_path . $manifest[$entry_key]['file'], array(), null, false);

View File

@ -2,19 +2,21 @@
namespace Sakura\Helpers;
use Sakura\Lib\BaseClass;
use Sakura\Controllers\InitStateController;
class ViteHelper
class ViteHelper extends BaseClass
{
// TODO: use a common .env file
// public $development_host = 'http://192.168.28.26:9000';
public static $development_host = 'http://127.0.0.1:9000';
public static $development_host = SAKURA_DEVEPLOMENT_HOST;
function __construct()
{
add_action('wp_enqueue_scripts', [$this, 'enqueue_common_scripts']);
// add_action('wp_enqueue_scripts', [$this, 'enqueue_development_scripts']);
add_action('wp_enqueue_scripts', [$this, 'enqueue_production_scripts']);
if (SAKURA_DEVEPLOMENT) {
add_action('wp_enqueue_scripts', [$this, 'enqueue_development_scripts']);
} else {
add_action('wp_enqueue_scripts', [$this, 'enqueue_production_scripts']);
}
// add tag filters
add_filter('script_loader_tag', [$this, 'script_tag_filter'], 10, 3);
add_filter('style_loader_tag', [$this, 'style_tag_filter'], 10, 3);
@ -32,8 +34,8 @@ class ViteHelper
public function enqueue_production_scripts()
{
$entry_key = 'src/main.ts';
$assets_base_path = get_template_directory_uri() . '/assets/dist/';
$manifest = $this->get_manifest_file();
$assets_base_path = get_template_directory_uri() . '/assets/main/';
$manifest = $this->get_manifest_file('main');
// <script type="module" crossorigin src="http://localhost:9000/assets/index.36b06f45.js"></script>
wp_enqueue_script('[type:module]chunk-entrance.js', $assets_base_path . $manifest[$entry_key]['file'], array(), null, false);
@ -91,9 +93,9 @@ class ViteHelper
return $tag;
}
public static function get_manifest_file()
public static function get_manifest_file(string $namespace)
{
$manifest = file_get_contents(__DIR__ . '/../assets/dist/manifest.json');
$manifest = file_get_contents(__DIR__ . "/../assets/{$namespace}/manifest.json");
return json_decode($manifest, true);
}
}

9
app/lib/base-class.php Normal file
View File

@ -0,0 +1,9 @@
<?php
namespace Sakura\Lib;
class BaseClass
{
public static $version = SAKURA_VERSION;
public static $text_domain = SAKURA_TEXT_DOMAIN;
}

View File

@ -2,8 +2,8 @@
namespace Sakura\Models;
class BaseModel
use Sakura\Lib\BaseClass;
class BaseModel extends BaseClass
{
public static $version = SAKURA_VERSION;
public static $text_domain = SAKURA_TEXT_DOMAIN;
}

View File

@ -4,7 +4,9 @@
"license": "MIT",
"scripts": {
"dev": "vite",
"build": "vite build",
"build": "yarn bulid:main && yarn build:admin",
"bulid:main": "APP_TARGET=main vite build",
"build:admin": "APP_TARGET=admin vite build",
"build:strict": "vue-tsc --noEmit && vite build",
"serve": "vite preview",
"test": "jest --coverage",

View File

@ -4,6 +4,8 @@ import vue from '@vitejs/plugin-vue'
import path from 'path'
import svgicon from 'vite-plugin-svgicon'
const target = process.env.APP_TARGET
// https://vitejs.dev/config/
export default defineConfig({
base: 'http://localhost:9000/',
@ -39,14 +41,11 @@ export default defineConfig({
target: 'modules',
manifest: true,
sourcemap: true,
outDir: 'app/assets/dist',
outDir: target === 'main' ? 'app/assets/main' : 'app/assets/admin',
chunkSizeWarningLimit: 2048,
rollupOptions: {
// external: ['vue'],
input: {
main: path.resolve(__dirname, 'src/main.ts'),
admin: path.resolve(__dirname, 'src/admin/main.ts'),
},
input: [path.resolve(__dirname, target === 'main' ? 'src/main.ts' : 'src/admin/main.ts')],
output: {
// TODO: use ES5 bundle instead
// globals: {