Replace laravel-mix with vite.js (#284)

vinkla · Jan 25, 2022 · 4cf1c14 · 4cf1c14
1 parent 0f8beb8
commit 4cf1c14
Show file tree

Hide file tree

Showing 8 changed files with 51 additions and 135 deletions.
diff --git a/README.md b/README.md
@@ -41,9 +41,9 @@ WordPlate is a wrapper around WordPress. It's like building any other WordPress
 
     If you want to use custom SMTP credentials to send emails, we've a package for that!
 
-- **Laravel Mix**
+- **Vite.js**
 
-    With Laravel Mix you can quickly get up and running with Webpack to build and minify your CSS and JavaScript.
+    With Vite you can quickly get up and running to build and minify your CSS and JavaScript.
 
 - **Debugging**
 
@@ -159,22 +159,20 @@ The plugin should now be installed in the `public/mu-plugins` directory.
 
 [Read more about the must-use plugin autoloader in the documentation.](https://roots.io/docs/bedrock/master/mu-plugin-autoloader/)
 
-## Laravel Mix
+## Vite.js
 
-[Laravel Mix](https://github.com/JeffreyWay/laravel-mix/tree/master/docs#readme) is a clean layer on top of Webpack to make the 80% use case laughably simple to execute. Most would agree that, though incredibly powerful, Webpack ships with a steep learning curve. But what if you didn't have to worry about that?
+[Vite](https://vitejs.dev/) is a build tool that aims to provide a faster and leaner development experience for modern web projects. Vite is opinionated and comes with sensible defaults out of the box, but is also highly extensible via its Plugin API and JavaScript API with full typing support.
 
-[To get started with Laravel Mix, please visit the documentation.](https://github.com/JeffreyWay/laravel-mix/tree/master/docs#readme)
+[To get started with Vite, please visit the documentation.](https://vitejs.dev/guide/)
 
 ```sh
-// Run all mix tasks...
+// Start the dev server...
 npm run dev
 
-// Run all mix tasks and minify output...
+// Build for production...
 npm run build
 ```
 
-If you want to use [Vite.js](http://vitejs.dev/) with WordPlate, see our setup guide in the [FAQ](#faq) section.
-
 ## Integrations
 
 Below you'll find a list of plugins and packages we use with WordPlate. Some of these projects are maintained by WordPlate and some are created by other amazing developers.
@@ -456,97 +454,6 @@ final class LocalValetDriver extends BasicValetDriver
 }
 ```
 </details>
-<details>
-<summary><strong>Can I use WordPlate with Vite.js?</strong></summary>
-
-1. It is possible to use Vite.js with WordPlate. First you'll need to replace the contents of the `package.json` file:
-
-    ```json
-    {
-        "private": true,
-        "scripts": {
-            "build": "vite build",
-            "dev": "vite"
-        },
-        "dependencies": {
-            "dotenv": "^10.0.0",
-            "vite": "^2.6.14"
-        }
-    }
-    ```
-
-2. Remove the `webpack.mix.js` file from the root of your project.
-
-3. Add a new file called `vite.config.js` in the root of your project and add the following script:
-
-    ```js
-    require('dotenv').config();
-
-    export default ({ command }) => ({
-      base: command === 'serve' ? '/' : '/build/',
-      publicDir: 'resources/static',
-      build: {
-        manifest: true,
-        outDir: `public/themes/${process.env.WP_DEFAULT_THEME}/assets`,
-        assetsDir: '',
-        rollupOptions: {
-          input: 'resources/scripts/index.js',
-        },
-      },
-      plugins: [
-          {
-            name: 'php',
-            handleHotUpdate({ file, server }) {
-              if (file.endsWith('.php')) {
-              server.ws.send({
-                type: 'full-reload',
-                path: '*',
-              });
-              }
-            },
-        },
-      ],
-    });
-    ```
-
-4. Remove the `<script>` tag from the `footer.php` file:
-
-    ```diff
-    -<script src="<?= get_theme_file_uri('assets/index.js') ?>" async></script>
-    ```
-
-5. Remove the `<link>` stylesheet tag from the `header.php` file:
-
-    ```diff
-    -<link rel="stylesheet" href="<?= get_theme_file_uri('assets/index.css') ?>">
-    ```
-
-6. Add the Vite.js `<script>` and `<link>` assets between the `<head>` tags in the `header.php` file:
-
-    ```php
-    <?php if (
-        wp_get_environment_type() === 'local' &&
-        is_array(wp_remote_get('http://localhost:3000'))
-    ) : ?>
-        <script type="module" src="http://localhost:3000/@vite/client"></script>
-        <script type="module" src="http://localhost:3000/resources/scripts/index.js"></script>
-    <?php else : ?>
-        <?php $manifest = json_decode(file_get_contents(get_theme_file_path('assets/manifest.json')), true); ?>
-        <script type="module" src="<?= get_theme_file_uri('assets/' . $manifest['resources/scripts/index.js']['file']) ?>" defer></script>
-        <link rel="stylesheet" href="<?= get_theme_file_uri('assets/' . $manifest['resources/scripts/index.js']['css'][0]) ?>">
-    <?php endif; ?>
-    ```
-
-7. Import the `index.css` file in the `resources/scripts/index.js` file:
-
-    ```diff
-    +import '../styles/index.css';
-    ```
-
-8. Move any static files such as fonts and images into the `resources/static` directory.
-
-9. Run `npm install` and then `npm run dev` to start the development server.
-</details>
 
 ## Acknowledgements
 

diff --git a/package.json b/package.json
@@ -1,16 +1,11 @@
 {
   "private": true,
   "scripts": {
-    "build": "mix --production",
-    "dev": "mix watch"
+    "build": "vite build",
+    "dev": "vite"
   },
   "dependencies": {
     "dotenv": "^10.0.0",
-    "laravel-mix": "^6.0.37"
-  },
-  "browserslist": [
-    ">0.25%",
-    "not ie 11",
-    "not op_mini all"
-  ]
+    "vite": "^2.7.12"
+  }
 }
diff --git a/public/themes/wordplate/header.php b/public/themes/wordplate/header.php
@@ -4,7 +4,19 @@
 <head>
     <meta charset="<?php bloginfo('charset'); ?>">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="<?= get_theme_file_uri('assets/index.css') ?>">
+
+    <?php if (
+        wp_get_environment_type() === 'local' &&
+        is_array(wp_remote_get('http://localhost:3000'))
+    ) : ?>
+        <script type="module" src="http://localhost:3000/@vite/client"></script>
+        <script type="module" src="http://localhost:3000/resources/scripts/index.js"></script>
+    <?php else : ?>
+        <?php $manifest = json_decode(file_get_contents(get_theme_file_path('assets/manifest.json')), true); ?>
+        <script type="module" src="<?= get_theme_file_uri('assets/' . $manifest['resources/scripts/index.js']['file']) ?>" defer></script>
+        <link rel="stylesheet" href="<?= get_theme_file_uri('assets/' . $manifest['resources/scripts/index.js']['css'][0]) ?>">
+    <?php endif; ?>
+
     <?php wp_head(); ?>
 </head>
 

diff --git a/resources/scripts/index.js b/resources/scripts/index.js
@@ -0,0 +1 @@
+import '../styles/index.css';
diff --git a/resources/static/.gitkeep b/resources/static/.gitkeep
diff --git a/resources/styles/index.css b/resources/styles/index.css
@@ -1 +0,0 @@
-

diff --git a/vite.config.js b/vite.config.js
@@ -0,0 +1,26 @@
+import { defineConfig } from 'vite';
+
+require('dotenv').config();
+
+export default defineConfig(({ command }) => ({
+  base: command === 'serve' ? '/' : '/build/',
+  publicDir: 'resources/static',
+  build: {
+    manifest: true,
+    outDir: `public/themes/${process.env.WP_DEFAULT_THEME}/assets`,
+    assetsDir: '',
+    rollupOptions: {
+      input: 'resources/scripts/index.js',
+    },
+  },
+  plugins: [
+    {
+      name: 'php',
+      handleHotUpdate({ file, server }) {
+        if (file.endsWith('.php')) {
+          server.ws.send({ type: 'full-reload', path: '*' });
+        }
+      },
+    },
+  ],
+}));
diff --git a/webpack.mix.js b/webpack.mix.js