如何使用套索动态定义在快速 JS 路由中呈现的 marko 模板的依赖项？

Question

例如：考虑一条路线 /theme 该路由应在指定为 route/query 参数的主题中呈现自身（读取：LESS 颜色变量）。根据主题参数，可能还需要注入自定义的JS脚本。

脚本和样式可能包含也可能不包含，具体取决于提供的参数（这排除了预配置套索或使用 bower.json）。这也意味着必须在路由呈现模板之前指定依赖项。

我目前正在使用 Marko v4 + ExpressJS + Lasso + Less + lasso-marko + lasso-less

我没有发布代码，因为在尝试了很多东西之后，代码到处都是。如果描述不够清楚，请告诉我。将尝试将沙箱放在一起以进行演示。

更新：添加核心文件和目录结构

sandbox
|- components
|  |- app-main.marko
|- dependencies
|  |- theme1
|     |- main.js
|     |- variables.less
|  |- theme2
|     |- main.js
|     |- variables.less
|- node_modules
|- public
|- templates
|  |- base
|     |- index.marko
|     |- style.less
|     |- browser.json  
|- index.js
|- package.json



//index.js
var markoExpress = require('marko/express');
require('marko/node-require');

var express = require('express');

var app = express();

var compression = require('compression'); 
var isProduction = process.env.NODE_ENV === 'production';

var lasso = require('lasso');
lasso.configure({
    plugins: [
        'lasso-marko', 
        'lasso-less'
    ],
    outputDir: __dirname + '/public', 
    bundlingEnabled: isProduction, 
    minify: isProduction, 
    fingerprintsEnabled: isProduction,
});

app.use(express.static('public'));
app.use(markoExpress());


app.use(compression());


app.use(require('lasso/middleware').serveStatic());

var template = require('./templates/base');
app.get('/:pub', function (req, res) {
    var pub = req.params.pub || "theme1";

    res.marko(template, {
        theme:pub
    });
});

app.listen(3000, function () {
    console.log('Example app listening on port 3000!');
    if (process.send) {
        process.send('online');
    }
});


//browser.json
{
    "dependencies": [
        {
            "if-flag": "theme1",
            "dependencies": [
                "less-import: ../../dependencies/theme1/variables.less",
                "../../dependencies/theme1/main.js"            
            ]
        },
        {
            "if-flag": "theme2",
            "dependencies": [
                "less-import: ../../dependencies/theme2/variables.less",
                "../../dependencies/theme2/main.js"  
            ]
        }
    ]
}


<!-- index.marko -->
<lasso-page package-path="./browser.json" flags="['${input.theme}']"/>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0"/>
  <title>Test Template</title>

  <!-- CSS includes -->
  <lasso-head/>

</head>
<body>

 <!-- Top-level UI component: -->
<include('../../components/app-main',input) />

<lasso-body/>
</body>
</html>


//style.less
main {
    background-color: @bgcolor;
    color: @fgcolor;
    width: 100%;
    height: 100%;
}





// ~/dependencies/theme1/variables.less
@bgcolor: red;
@fgcolor: white;

// ~/dependencies/theme1/main.js
alert("theme1");



<!-- app-main.marko -->
<main>TADAAA</main>

Answer 1

Lasso 支持基于"flags"的条件依赖：https://github.com/lasso-js/lasso#conditional-dependencies

如果您将主题设为标志之一，则可以使用该标志有条件地在 browser.json:

中引入 Less 变量或其他依赖项

{
    "dependencies": [
        {
            "if-flag": "theme1",
            "dependencies": [
                "less-import: ./theme1/variables.less"            
            ]
        },
        {
            "if-flag": "theme2",
            "dependencies": [
                "less-import: ./theme2/variables.less"            
            ]
        }
    ]
}

您可以对所有主题进行预构建，或者可以在运行时使用 Lasso 动态构建页面 JS/CSS。

希望能解决您的问题。

Answer 2

在尝试了很多事情之后，我不得不求助于以编程方式将样式表构建为字符串并将其插入样式标签内的模板中。

<style>${input.computedStyleString}</style>

这显然不太理想（考虑到套索如何很好地处理其他一切）但它有效。

如何使用套索动态定义在快速 JS 路由中呈现的 marko 模板的依赖项？

How to dynamically define dependencies for a marko template being rendered in express JS route using lasso?

less

express

marko

lasso.js