Tailwind - 如何在 js 或 php 中获取版本

Question

我的背景 Laravel v8.81.0（PHP v8.1.2）、Vue v3.2.30 和 Tailwind

我想在 js 中获取 Tailwind 版本，例如通过以下方式获取 Vue 版本：

//app.js
require('./bootstrap');
import { createApp } from 'vue'
import { version } from 'vue'

let app = createApp({
    data() {
        return {
            vueVersion : version
        }
    },
}).mount('#app')

并在 vue 中使用版本变量并将其传递给 laravel 视图

还有Laravel

//uploadfiles.blade.php
...
<div class="mb-12 mt-12">
    <h1 class="text-lg">My app</h1>
    <h4 class="text-sm mt-4">powered by Laravel v{{ Illuminate\Foundation\Application::VERSION }} (PHP v{{ PHP_VERSION }}), Vue v${ vueVersion } and Tailwind</h4>
</div>
...

或获取类似于 php 渲染方式的 Tailwind 版本 php 版本和 laravel 版本。

应用build/compiled？在 Laravel Mix/webpack?(npm 运行 dev ) 和 laravel cli (./vendor/bin/sail up)

mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
    require('tailwindcss')
]).vue();

//package.json
{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "axios": "^0.21",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "postcss": "^8.1.14",
        "tailwindcss": "^3.0.18",
        "vue-loader": "^16.8.3"
    },
    "dependencies": {
        "vue": "^3.2.30"
    }
}

Answer 1

您可以使用phpfile_ge_content阅读package.json

<?php

$packageJSON = json_decode( file_get_contents(ABSPATH . 'package.json') );

var_dump($packageJSON->devDependencies->tailwindcss);

Answer 2

您可以要求 tailwind 的 package.json 并从那里获取版本。

//app.js
require('./bootstrap');

const tailwindCssVersion = require('tailwindcss/package.json').version;

import { createApp } from 'vue'
import { version } from 'vue'

let app = createApp({
    data() {
        return {
            vueVersion: version,
            tailwindCssVersion: tailwindCssVersion
        }
    },
}).mount('#app')

<h4 class="text-sm mt-4">[...] TailwindCSS v${ tailwindCssVersion }</h4>

Answer 3

<?php

$packageJSON = json_decode(file_get_contents(base_path() . '/package.json'));
$tailwindV = $packageJSON->devDependencies->tailwindcss;
$out = str_replace('^', '', $tailwindV); //add this line if you want remove ^ sign
echo $out;

?>

Tailwind - 如何在 js 或 php 中获取版本

Tailwind - how to get version in js or php

javascript

laravel

vue.js

tailwind-css