javascript – HTML webpack插件不解析EJS变量

2019-06-08 08:31:06 阅读：545 来源： 互联网

标签：javascript node-js webpack ejs html-webpack-plugin

我正在尝试将.Google API密钥从.env文件加载到我的主索引中.我知道process.env.GOOGLE_PLACES_API_KEY正确加载,因为我可以控制日志并且它会吐出我的密钥.但它不会将变量渲染到DOM中.

我几乎从不使用EJS,而Webpack一直是我推动这个项目向前发展的最大绊脚石.似乎有千种不同的选择来做一些应该非常简单和直接的事情.我只需要将一个JS变量插入到我输出的HTML中.

这是我的webpack配置：

// webpack.dev.config.js
const webpack = require('webpack');
const path = require('path');
const SplitByPathPlugin = require('webpack-split-by-path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: [
    path.join(__dirname, 'client', 'src', 'main.js'),
    'webpack-hot-middleware/client',
    'webpack/hot/dev-server',
  ],
  devtool: 'source-map',
  target: 'web',
  output: {
    path: '/',
    publicPath: 'http://localhost:3000/',
    filename: '[name].js',
  },
  module: {
    loaders: [
      {
        test: path.join(__dirname, 'client', 'src'),
        loaders: [
          'react-hot-loader',
          'babel-loader?presets[]=react,presets[]=es2015,presets[]=stage-0,plugins[]=transform-decorators-legacy,cacheDirectory=babel_cache',
        ],
        exclude: /node_modules/,
      },
      { test: /\.css$/, loader: 'style-loader!css-loader' },
      { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192' },
    ],
  },
  resolve: {
    extensions: ['.js', 'map'],
  },
  plugins: [
    new SplitByPathPlugin([
      {
        name: 'vendor',
        path: path.join(__dirname, '..', 'node_modules'),
      },
    ]),
    new HtmlWebpackPlugin({
      title: 'Better Beehive Project',
      template: 'client/index.dev.ejs',
      inject: false,
      appMountId: 'app',
      filename: '../index.html',
      placesApiKey: process.env.GOOGLE_PLACES_API_KEY,
    }),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
    }),
    new webpack.HotModuleReplacementPlugin(),
  ],
};

这是我的index.ejs

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
    <title>Better Beehive Project</title>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=<% htmlWebpackPlugin.options.placesApiKey %>&libraries=places"></script>
  </head>
  <body>
    <div id='app'></div>
    <script type="text/javascript" src="manifest.js"></script>
    <script type="text/javascript" src="main.js"></script>
  </body>
</html>

Google商家信息的脚本代码只会呈现为：

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=&libraries=places"></script>

我已经尝试了一些东西(明确使用ejs-loader,我根本无法工作,使用dotenv-webpack,结果证明是不必要的).前进的任何指导？

解决方法:

您没有使用正确的语法进行插值.

从EJS – Tags开始：

<% ‘Scriptlet’ tag, for control-flow, no output

<%_ ‘Whitespace Slurping’ Scriptlet tag, strips all whitespace before it

<%= Outputs the value into the template (escaped)

<%- Outputs the unescaped value into the template

通过使用<％,您只评估表达式,但它没有输出.您需要使用<％=代替.

<%= htmlWebpackPlugin.options.placesApiKey %>

标签：javascript,node-js,webpack,ejs,html-webpack-plugin
来源： https://codeday.me/bug/20190608/1196529.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript – HTML webpack插件不解析EJS变量