bazilio91 / ejs-compiled-loader Goto Github PK

I found that ejs-compiled-loader using git repository to download the ejs dependency. Why? I'm using docker and when running docker build, it always fail because docker don't have git installed. How to solve this problem?

child tempalte file can not be htmlmin,like this:

<!--index.html-->
<!-- index.html comment  -->
<%list.forEach(function(value){%>
    <% include child.html %>
<%})%>


<!--child.html-->
<!-- child.html comment  --> <!--can not do htmlmin-->
<%= value%>

I also had this issue, but It can't be solved by the above method， So someone can help me， thank you.

Can you share your ejs webpack config rule?

Originally posted by @ZacxDev in #46 (comment)
`const path = require('path');
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MinCssExtractPlugin = require("mini-css-extract-plugin"); // 将css代码提取为独立文件的插件
const MediaQueryPlugin = require('media-query-plugin');

module.exports = {
mode: 'production',
entry: [
'./src/index.js'
],
output: {
path: path.resolve(__dirname, './dist'),
filename: 'bundle.js'
},
module: {
rules: [{
test: /.s[ac]ss$/i,
use: [
{
loader: MinCssExtractPlugin.loader, // 将处理后的CSS代码提取为独立的CSS文件，可以只在生产环境中配置，但我喜欢保持开发环境与生产环境尽量一致
options: {
publicPath: '/assets/',
// only enable hot in development
hmr: true,
// if hmr does not work, this is a forceful method.
reloadAll: true,
},
},
'css-loader', // CSS加载器，使webpack可以识别css文件
MediaQueryPlugin.loader,
'postcss-loader', // 承载autoprefixer功能，为css添加前缀
'sass-loader', // Compiles Sass to CSS
],
},
{
test: /.css$/,
use: [{
loader: 'file-loader',
options: {
name: '[name].[hash:8].[ext]',
outputPath: 'assets/',
publicPath: './assets/'
}
},
'extract-loader',
'css-loader',
'postcss-loader']
},
{
test: /.(jpg|png|gif|svg)$/,
use: {
loader: 'file-loader',
options: {
name: '[name].[hash:8].[ext]',
outputPath: 'assets/',
publicPath: './assets/'
}
}
},
{
test: /.ejs$/,
use: {
loader: 'ejs-compiled-loader',
options: {
htmlmin: true,
htmlminOptions: {
removeComments: true
}
}
}
}
]
},
plugins: [new HtmlWebpackPlugin({
template: 'src/index.ejs',
inject: true,
minify: {
collapseWhitespace: true
}
}),
new webpack.HotModuleReplacementPlugin(),
new MinCssExtractPlugin(),
new MediaQueryPlugin({
include: [
'style',
],
queries: {
'print': 'print',
'not print': 'not-print'
}
})
],
devServer: {
contentBase: path.join(__dirname, 'dist'),
compress: true,
overlay: true,
port: 4550,
open: true,
hot: true
}
};
`
{
"name": "resume",
"version": "1.0.0",
"description": "个人简历",
"main": "index.js",
"repository": "https://github.com/songxingguo/resume.git",
"author": "songxingguo [email protected]",
"license": "MIT",
"scripts": {
"start": "webpack-dev-server --mode=development",
"build": "webpack --mode=production"
},
"devDependencies": {
"@babel/core": "^7.10.2",
"@babel/preset-env": "^7.10.2",
"autoprefixer": "^9.1.5",
"babel-loader": "^8.1.0",
"css-loader": "^1.0.0",
"cssnano": "^4.1.0",
"ejs-compiled-loader": "^3.0.0",
"ejs-loader": "^0.5.0",
"extract-loader": "^2.0.1",
"file-loader": "^1.1.11",
"html-webpack-plugin": "^3.2.0",
"media-query-plugin": "^1.3.1",
"mini-css-extract-plugin": "^0.9.0",
"node-sass": "^4.14.1",
"postcss-import": "^12.0.1",
"postcss-loader": "^3.0.0",
"postcss-px2rem-exclude": "0.0.6",
"postcss-url": "^8.0.0",
"px2rem-loader": "^0.1.9",
"raw-loader": "^0.5.1",
"sass-loader": "^8.0.2",
"style-loader": "^1.2.1",
"webpack": "^4.43.0",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.11.0"
},
"dependencies": {
"fs": "0.0.1-security",
"lib-flexible": "^0.3.2"
}
}

thank you

Why add the overhead of prettifying the generated template?

We want the loader to be as fast as possible, right?

"git+https://github.com/nemanjan00/ejs.git"

The readme says:

Install with 'npm i ejs-compiled-loader'

Shouldn't it be:
npm i ejs-compiled-loader-webpack4
???

This package depends on a vulnerable version of merge resulting in 2 high severity vulnerabilities.

# npm audit report

merge  <2.1.1
Severity: high
Prototype Pollution - https://npmjs.com/advisories/1666
fix available via `npm audit fix --force`
Will install [email protected], which is a breaking change
node_modules/ejs-compiled-loader/node_modules/merge
  ejs-compiled-loader  >=2.1.1
  Depends on vulnerable versions of merge
  node_modules/ejs-compiled-loader

2 high severity vulnerabilities

To address all issues (including breaking changes), run:
  npm audit fix --force

(node:2732) DeprecationWarning: loaderUtils.parseQuery() received a non-string value which can be problematic, see webpack/loader-utils#56
parseQuery() will be replaced with getOptions() in the next major version of loader-utils.

As of WebPack 2, passing string to parseQuery() is deprecated. In the next major version of loader-utils it will be removed. So, what about changing

var query = utils.parseQuery(this.query);

to

var query = utils.getOptions(this);

PS. I am talking about ejs-render-loader. BTW, do you know that https://npmjs.com/package/ejs-render-loader links to ejs-compiled-loader?

Since this package collects dust and vulnerable dependencies, i've made an up-to-date drop-in-replacement:

https://www.npmjs.com/package/ejs-loader-compiled

You're welcome.

Can you add version 1.1 to npm please?

I just installed this loader...and saw this in the output.

[email protected] node_modules/ejs

[email protected] node_modules/ejs-compiled-loader
├── [email protected]
└── [email protected]

Why aren't you using the newer version?

Hi,

To check if a parameter is optional or not, this is the only way I've gotten it to work.

<%= typeof optional!='undefined' ? optional : '' %>

Shouldn't this work as well?

<%= optional ? optional : '' %>

Is there any other way to do this?

# Run  npm install --save-dev [email protected]  to resolve 2 vulnerabilities
SEMVER WARNING: Recommended action is a potentially breaking change

  Low             Incorrect Handling of Non-Boolean Comparisons During          
                  Minification                                                  

  Package         uglify-js                                                     

  Dependency of   ejs-compiled-loader [dev]                                     

  Path            ejs-compiled-loader > uglify-js                               

  More info       https://npmjs.com/advisories/39                               




  Low             Regular Expression Denial of Service                          

  Package         uglify-js                                                     

  Dependency of   ejs-compiled-loader [dev]                                     

  Path            ejs-compiled-loader > uglify-js                               

  More info       https://npmjs.com/advisories/48                               

looks like uglify-js needs to be updated?

Hello!
In index.ejs i have included partial <% include partials/_header.ejs %> if i change this file _header.ejs
nothing happens.

Would it be possible to enable this as a config setting? Currently this loader cannot produce the same behavior as transform?ejsify when includes are involved, and I'd like to be able to use this loader instead of transform?ejsify.

ejs-compiled-loader version is 3.0.0
"webpack" is "4.43.0",
"webpack-cli" is "3.3.11"
Get the following error when building:

Module build failed (from ./node_modules/ejs-compiled-loader/index.js):
Error: A valid query string passed to parseQuery should begin with '?'
at Object.parseQuery (/media/data/web/node_modules/ejs-compiled-loader/node_modules/loader-utils/lib/parseQuery.js:13:11)
at Object.module.exports (/media/data/web/node_modules/ejs-compiled-loader/index.js:15:102)

Hello, you may add the following note for webpack 2 usage. Please add my github name as a contributor to the package if you decide to include this in your docs.

Note that ‘with’ that is deprecated in es6. For webpack 2 usage, you must pass an option in your query strict=true or _with=false that will disable with in the ejs package.

Examples:
strict=true

import tmpl1 from '!!../?strict=true!./template.ejs';
import tmpl2 from '!!../?delimiter=?&strict=true!./template2.ejs';
import tmpl3 from '!!../?strict=true!./subdir/parent.ejs';

_with=false

import tmpl1 from '!!../?_with=false!./template.ejs';
import tmpl2 from '!!../?delimiter=?&_with=false!./template2.ejs';
import tmpl3 from '!!../?_with=false!./subdir/parent.ejs';

Template examples:

You will need to refer to your vars from the locals object when with has been disabled as illustrated below:

Hello, <%=locals.noun%>!

<? for(var key in locals.hobbies) { var hobby = locals.hobbies[key]; -?>
  I like {{=hobby}}.
<? } ?>

child: <%= locals.foo %>

"compileDebug" is default on (if you are not minifying).

This is causing some code to get injected which appears to be relying on the EJS runtime.

The offending code is part of a "rethrow" function which throws an exception on:

var filename = utils.escapeXML(flnm);

Unsure what the fix is here. Perhaps the "ejs" library should be including the utils module when "client" is true.

It might be more appropriate to make "compileDebug" default false, or at least document any side-effects. This took me by surprise.

Anybody wants to become a contributor/collaborator? I have no interest to support this package now (I'm on DevOps title right now). I can't track all the changes that came in webpack.v2/es6.

Hi all
I try to pass local data using include but getting error.

I confirm that this works
<%- include ../../components/content.blocks/two.column.content.ejs %>

However when I pass some local data along with include as bellow I get error

<%- include('../../components/content.blocks/two.column.content.ejs', {content: content}); %>

However I got error
ENOENT: no such file or directory, open 'C:\Projects\Nephele\src\UI\src\templates\layouts\avalon('..\components\content.blocks\two.column.content.ejs', {content: content});'

More Detail Code:

page.templates.js

const pages = [
    {
        title: 'Fleets',
        template: 'templates/pages/avalon/fleets.ejs',
        filename: 'fleets.html',
        inject: 'body',
        data: require('../templates/data/avalon/fleets.json')
    }
];

const pageTemplates = pages.map(page => new HtmlWebpackPlugin(page));

module.exports = pageTemplates;

webpack.config.js

const pageTemplates = require('./page.templates.avalon.js');
const webpack = require('webpack');
let config = require('../../webpack.config.js');

// Set entry point
config.entry.app = './scripts/brands/avalon.js';

// Load in page templates
config.plugins.push(...pageTemplates);

module.exports = config;

fleets.ejs

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title><%= htmlWebpackPlugin.options.title %></title>
        <meta name="viewport" content="width=device-width, initial-scale=1">

     
</head>

<body>
    <%- include src/templates/layouts/avalon/fleets.layout.ejs %>
</body>

</html>

Fleet.layout.ejs

<% 
var data = htmlWebpackPlugin.options.data;
if (data) {  %>
<!-- Header -->
<%- include ../../components/avalon/header/header.ejs %>
    <div class="page-mask">
        <%- include ../../components/hero.image/hero.image.ejs %>
        <%- include ../../components/content.blocks/one.column.content.ejs %>
        <%- include ../../components/content.blocks/image.row.content.ejs %>
        <% if(data.twoColumnContent[0]){ 
            var content = data.twoColumnContent[0]; %>
            <%- include("../../components/content.blocks/two.column.content.ejs", {content: content}); %>
        <%}%>
       
        <%- include ../../components/content.blocks/title.button.content.ejs %>
        <%- include ../../components/footer/footer.ejs %>
    </div>
<%}%>

Is it possible to recompile parent template automatically when his child template(<% include child %>) is changed?

could not support weapack4

I'm seeing a security vulnerability based on the version of this package's ejs dependency. It looks like ejs solved that in version 3.1.7. I tried updating ejs-compiled-loader to use 3.1.8 (the latest ejs), and did not run into problems the way I use it. Is this an update you can do please?

$npm audit
# npm audit report

ejs  <3.1.7
Severity: critical
Template injection in ejs - https://github.com/advisories/GHSA-phwq-j96m-2c2q
No fix available
node_modules/ejs
  ejs-compiled-loader  *
  Depends on vulnerable versions of ejs
  node_modules/ejs-compiled-loader

As this issue #40, the old of ejs uses git contributer instead of use npm package for ejs. Please update to fix it.

uglify is old and version included has 2 security vulnerabilities. This should be upgraded to > @2.6.0

I think can do HTMLMinifier before compiled, And configure HTMLMinifier that is would be great.

before

var template = ejs.compile(source, opts);

do

source = opts.htmlmin ? require('html-minifier').minify(source/*,options*/) : source;
var template = ejs.compile(source, opts);

thanks.

First I'm so sorry for my poor English.
default : open <% close %>

I want to set other, how?

Please!

No matter what I do to include partials, I always receive the following error "Error: ENOENT: no such file or directory". The EJS include does not resolve the partial, even if I move the partials to the same level as the 'entry' ejs file. I'm running with webpack-dev-server.

What I'm trying to do:

I have existing EJS files, I want to compile them (and their partials), then have the project accessible from dist/index.html (using html-webpack-plugin, see below). Previously this was a gulp task.

Project structure:
app/

• layouts/default.ejs
• main.ejs
• webpack.config.js

scripts/

• main.js

assets/
dist/

In main.ejs, I have:

<%- include layouts/default -%>

Relevant parts of webpack.config looks like:

const appDir  = path.resolve(__dirname, 'app'),
      distDir = path.resolve(__dirname, 'dist')

---

  output: {
    devtoolLineToLine : true,
    sourceMapFilename : 'main.js.map',
    pathinfo          : true,
    path              : distDir,
    filename          : 'main.js'
  },
  module : {
    loaders: [
      {
        test: /.ejs$/,
        loader: 'ejs-compiled'
      },
      //Run JS through babel-loader
      {
        test   : /.js$/,
        loader : 'babel-loader',
        include: appDir,
        exclude: /node_modules/,
        query  : {
          plugins: ['lodash'],
          presets: ['es2015'],
        }
      },
..
}
  plugins: [
    new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.bundle.js'),
    new HtmlWebpackPlugin({
  title    : 'Puzzle Slider Proto',
  template : '!!ejs-compiled-loader!' + appDir + '/main.ejs'
})
  ]

I'm using ES6 with:
"ejs-compiled-loader": "^1.1.0",
"babel-loader": "^6.2.5",
"html-webpack-plugin": "^2.24.1",

I'm attempting to upgrade this loader to ejs 3.0 to make dynamic includes easier.

I have a few paths I'm attempting here:

1. Rebuild this with ejs 3.0. I'm running into an issue with the includes function itself. I believe I'm in the wrong scope for the template function of ejs.

2. Do dynamic includes using require or some other existing JS infra

I think the issue may ultimately have to do with how webpack-html-plugin is handling templates, but I'd love some guidance.