个人中心
gpt4 book ai didi

javascript - 如何将变量与 HtmlWebpackPlugin 和 twig-loader 一起使用？

转载 作者：行者123 更新时间：2023-11-28 04:33:28 30 4
gpt4 key购买 nike

我制作了一个小型引擎来创建多语言模板。使用 HtmlWebpackPlugin 从 twig 到 HTML，并从 json 文件加载一些动态变量。但编译后我仍然在 HTML 文件中看到我的变量...

有人看到我可以在哪些方面进行改进吗？还是我哪里做错了？

Webpack.config.js:

'use strict';
var path = require('path');
var _ = require('lodash');
var webpack = require('webpack');
var timestamp = require('time-stamp');
var packageJson = require('./package.json');
var autoprefixer = require('autoprefixer');
var htmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var pages = require('./templates.json');

var templatePages = _.map(pages, function(page) {
let translation = require('./src/assets/translations/lang.'+page.lang+'.json');
return new htmlWebpackPlugin({ 
    filename: page.filename, 
    template: page.template,
    trans: translation
 });
});

const DEV_DIR = './src';
const DIST_DIR = './dist';

module.exports = {
    devtool: "source-map",
    entry: {
        app: [DEV_DIR+'/js/app.js',DEV_DIR+'/css/main.scss']
    },
    output: {
        path: path.resolve(__dirname, 'tmp'),
        filename: "[name].js",
        library: "[name]"
    },
resolve: {
    extensions: ['', '.js', '.twig']
},
module: {
    preLoaders: [{
        test: /\.js$/,
        exclude: /(bin|node_modules|bower_components|grunt|gulp|bower)/,
        loaders: ['eslint-loader']
    }],
    loaders: [{
        test: /\.js$/,
        exclude: /(bin|node_modules|bower_components|grunt|gulp|bower)/,
        loader: 'babel',
        query: {
            presets: ['es2015'],
            babelrc: false
        }
    }, {
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract(
            'style-loader',
            'css-loader!postcss-loader!sass-loader'
        )
    }, {
        test: /\.(jpe?g|png|gif|svg|ico)$/i,
        loaders : [
            'file-loader?hash=sha512&digest=hex&name=/assets/img/[name].[ext]',
        ]
    },{
        test: /\.(json)$/i,
        loaders : [
            'file-loader?hash=sha512&digest=hex&name=/assets/translations/[name].[ext]',
        ]
    }, {
        test: /\.twig$/,
        loader: "twig-loader"
    }]
},
devServer : {
    contentBase : 'tmp',
    inline      : true
},
eslint: {
    configFile: './.eslintrc'
},
sasslint: {
    configFile: './sass-lint.yml',
    emitError: true
},
plugins: [
    new ExtractTextPlugin(
        '/css/main.css',
        { allChunks: true }
    ),
    new webpack.DefinePlugin({
        __DEBUG     : JSON.stringify(true),
        __NAME      : JSON.stringify(packageJson.name),
        __DESC      : JSON.stringify(packageJson.description),
        __VERSION   : JSON.stringify(packageJson.version),
        __TIMESTAMP : JSON.stringify(timestamp('YYYY/MM/DD HH:mm:ss:ms'))
    }),
    new webpack.optimize.UglifyJsPlugin({
        compress: {
            warnings: false
        },
        output: {
            comments: false
        }
    }),
    new webpack.ProvidePlugin({
        Logger   : path.resolve(__dirname, 'libs/Logger')
    })
].concat(templatePages),
};

模板 Json:

[
    {
        "filename": "./nl/index.html",
        "template": "./src/twig/index.twig",
        "lang": "nl"
    },
    {
        "filename": "./fr/index.html",
        "template": "./src/twig/index.twig",
        "lang": "fr"
    },
    {
        "filename": "./de/index.html",
        "template": "./src/twig/index.twig",
        "lang": "de"
    }
]

翻译文件:

{"toggle_mobile":"Menu",
"menu_primary_introduction":"Introductie",
"menu_primary_reference":"Referenties",
"menu_primary_information":"Aanpak",
"menu_primary_contact":"Contact",}

索引.twig:

<!DOCTYPE html>
<html lang="<%= htmlWebpackPlugin.options.trans.menu_lang_short %>">
<head>
    <meta charset="utf-8" />
    <meta name="keywords" content="" />
    <meta name="description" content="Title CMS" />
    <meta name="author" content="Company BVBA" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Title CMS</title>
    <link type="image/x-icon" href="/assets/img/favicon.ico" rel="shortcut icon" />
    <script src="https://use.typekit.net/oww0qak.js"></script>
    <script>try{Typekit.load({ async: true });}catch(e){}</script>
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
</head>
<body>
    <div class="page-body">

        <header class="header-primary">
            <%= htmlWebpackPlugin.options.trans.menu_primary_introduction %>
        </header>
    </div>
</body>
</html>

最佳答案

已修复!

我对 JS/HTML 的方法感到困惑 <%= =%>和 Twig 。对于 Twig ，没有必要使用 <%= =%> 。我只能使用{{ }} .

所以我的工作结果，例如:

<span class="navbar-toggler-text">{{ htmlWebpackPlugin.options.trans.toggle_mobile }}</span>

关于javascript - 如何将变量与 HtmlWebpackPlugin 和 twig-loader 一起使用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44431855/

30 4 0
文章推荐： javascript - 自动生成剑道网格列时如何自定义列模板？
文章推荐： javascript - 在javascript中对多维数组进行排序？
文章推荐： javascript - 三.js内存管理着色器 Material
文章推荐： css - trac wiki 中页脚的条件格式/自定义
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com