html 미니 버전은 es6를 지원하지 않는 것 같습니다?

묘사

은 html 브라우저가 uglify-js을 사용하기 때문일 수 있으며,uglifyjs는es6를 지원하지 않습니다.하지만 uglify-es은 확실히...here 만나요.
우리도 html 브라우저에서 추한es를 사용할 수 있습니까?어떻게 써요?

토론 #1

분 계세요?

토론 #2

은 minifyJS: function(text, inline) { ... }을 사용하여 외부 JavaScript 최적화 프로그램을 적절하게 교환할 수 있습니다.uglify-es은 기본적으로 알파 단계에 있으며 광범위한 테스트 범위 등이 없습니다. 따라서 기본 마이크로프로세서로 사용되지 않습니다.

토론 #셋

@alexlamsl inline의 논점은 무엇입니까?너는 내가 이 점을 실현하도록 도와줄 간단한 예(심지어 위례)가 있니?

토론 #4

inline=true <a onclick="doIt()"> 같은 거 적용. - 정상 <script>alert(42);</script> inline=false

토론 #5

@alexlamsl 죄송합니다. 일손이 더 필요합니다.현재, 나는 -c 스위치를 통해 설정 파일을 지정하고 있다.프로파일에 다음과 같은 설정이 있습니다.

{
  "caseSensitive": false,
  "minifyJS": true,
  "minifyCSS": true
}

이 점을 테스트하기 위해서 나는 minifyJS에 함수를 제공하려고 시도했다. 이 함수는 text만 되돌려주고 수정되지 않았다.

{
  "caseSensitive": false,
  "minifyJS": "function(text, inline) { return text }",
  "minifyCSS": true
}

그러나 위의 설정으로 html-minifier을 실행할 때 기본 js minifier를 사용하고 있는 것 같습니다.

토론 #6

매개 변수 값으로 function을 지정하려면 CLI 대신 API를 사용해야 합니다.

토론 #7

아, 그게 문제야.CLI를 통해 사용해야 합니다.CLI를 통해 사용할 수 있도록 에스6 축소를 지정할 수 있는 간단한 옵션을 minifyJS에 추가할 수 있습니까?uglify-es이 정말 알파인가요?나는 너도 이 책의 저자라는 것을 알아차렸다.나는 매달 17만 건의 uglify-es건의 다운로드가 있다는 것을 알아차렸는데, 자술문서에서 이것은 알파의 품질일 뿐이라고 언급하거나 경고하지 않았다.

토론 #8

저는 uglify-es을 적극적으로 지지하지 않습니다. 그 존재는 다른 사람들이 테스트와 개발을 쉽게 하기 위해서입니다. 아직까지 많은 일이 일어나지 않았습니다.
원하는 대로 요청을 수행하여 function 유형 매개변수 값에 대한 CLI 지원을 확장할 수 있습니다.

토론 #9

@drmrbrewer minifyJS의 uglify-es 함수에 대해 기본적으로 아래의 포장을 다시 실현해야만 inline이 정상적으로 작동할 수 있습니다.
https://github.com/kangax/html-minifier/blob/v3.5.3/src/htmlminifier.js#L678-L688
AFAICT라는 못생긴 축소 포장기 처리 html 주석, 못생긴 해석 옵션 bare_returns을 설정하고 마지막 번호를 제거합니다(존재하면).

토론 #10

@alexlamsl 당신은 모든 주요 사이트가 ES5라는 것을 발견했습니까?

I don't actively support uglify-es

이것은 좋은 생각입니다!

it is there to make it easier for other people to test and develop, which hasn't really happened much so far.

FWIW, uglify-es은 적어도 babel-minify(전 babili)과 마찬가지로 안정적이며 ES6 축소에 사용된다.매주 50000회 다운로드가 있는데, 없으면 더 많은 버그 보고서를 볼 수 있습니다.uglify-es은 현재 uglify-js의 다운로드량의 1%에 불과할 수 있지만, [email protected]이 발표되면 이 비율은 곧 달라질 것이다. 더 많은 오류 보고가 있을 것이다.

토론 #11

이 코드는 uglify-js이 코드를 해석하고 축소할 수 없으면 원래 코드로 되돌아갈 수 있다고 생각합니다.
https://github.com/kangax/html-minifier/blob/v3.5.3/src/htmlminifier.js#L685

토론 #12

Do you still find that all major websites are ES5?

@kzc에서 ES6를 자주 사용하는 사이트는 하나도 없습니다. 단독 파일에서도 HTML에 삽입된 것은 말할 것도 없습니다.
그러나 보시다시피 잘못된 형식의 JS는 html-minifier에 닿지 않기 때문에 ES6 자체는 '스텝쇼' 도구가 아닙니다.

That's a good one! :-)

호환성/성능 이야기가 변할 때, 나는 클라이언트 브라우저로 전송되는 대부분의 코드가 여전히 매우 좋은 오래된 자바스크립트라는 문제를 다시 한 번 토론할 것이다.
ES6+의 상태가 지난 몇 년 동안 개선되었음을 확실히 동의합니다. 그러나: wink:

none of the sites I frequent use ES6 even in separate files, let alone embedded within HTML.

아이러니하게도 Babel이 ES6+를 ES5로 전환하는 성공은 사실상 유행이 지난 브라우저가 계속 존재하도록 격려했다.대부분의 웹 사이트가 어느 해에 ES6로 전환되는지 알고 싶습니다.2020?

토론 #13

@alexlamsl 최소한

토론 #14

을 ES6가 포함된 스크립트 블록에서 주석을 삭제할 수 있습니까?ES6 코드의 나머지 부분은 축소할 수 있도록 별도의 스크립트 블록으로 옮겼지만, 주석이라도 무시되었습니다.나는 이렇게 하는 목적이 어떤 ES6 내용도 영향을 받지 않도록 하는 것임을 알고 있지만, 평론을 삭제하는 것은 틀림없이 논쟁을 일으키지 않을 것이다.저는 댓글을 좀 좋아해요. 댓글이 많아요...html-minifier@alexlamsl은 어떻게 합니까?댓글 삭제하면 돼요?

토론 #15

@alexlamsl nevermind, 저는 현재 html minifier의 출력에서 다음과 같은 내용을 실행하고 있습니다. 건드리지 않은 ES6 부분에서 주석 줄을 삭제하는 신속하고 더러운 방법입니다.

sed -i '/^[[:blank:]]*\/\//d' index.html

토론 #16

은 이 문제를 너무 일찍 닫아서는 안 됩니다.
HTML 문서의 내연 ES6에는 사용자 정의 요소인 웹 구성 요소가 매우 자연스러운 예가 있습니다.이것들은 통상적으로 포장할 것이다.html 파일, 그리고 html을 통해 가져오거나 등가물을 많이 채워서 불러옵니다.
따라서 html 축소기는 ES6 축소를 지원해야 한다.일부 비과학적인 견본 통계에 의하면, 이런 병례들이 흔한지 희귀한지 결코 중요하지 않다.예를 들면 웹 표준이 지원하는데, 이것이야말로 가장 중요하다.
FWIW, 이것은 간단한 노드입니다.앞에서 설명한 @alexlamsl과 같이 API를 사용하여 ES6 인식 축소를 지원하는 js 스크립트:
`#!/usr/local/bin/node
//stdin에서 HTML을 읽고 축소된 HTML/CSS/ES6 Javascript를 stdout에 쓰기
var UglifyJS=require('uglify-es');//ES6 지원 JS 미니어처
var minify=require('html-minifier').축소
var stdin = 프로세스스토틴,
stdout = 프로세스.스토두트,
inputChunks=[];
스톡홀름.resume();
스톡홀름.인코딩 설정('utf8');
스톡홀름.on('data', 함수(블록)
블록을 입력합니다.밀다
});
var uglifyEsOptions={parse:{};
//개편https://github.com/kangax/html-minifier/blob/gh-pages/src/htmlminifier.js:676앞으로 나아가다
함수 minify es6 (텍스트, 인라인 연결) {
var start=text.일치(/^\s\s$/,'): 텍스트,
추악한 행동.해석하다.bare_returns=inline;
var result=UglifyJS.축소(코드, uglifyEsOptions),
if(result.error){
위문하다.로그('Uglify-es 오류:', 결과 오류);
텍스트로 돌아가기;
}
결과를 반환합니다.비밀번호바꾸기(/;$/,');
}
var 옵션 =
collapsebooleanates: 맞아요.
collapseWhitespace: 예,
그렇습니다.
맞아요.
html5:맞아요,
minifyJS:minify_es6,
RemoveAttributeTotes: 예,
removeComments: 정확
};
스톡홀름.on('end',function(){
var input=inputChunks.가입("");

var output = minify(input, options);

stdout.write(output);
stdout.write('\n');

});`

토론 #17

@cloudspeech에서 제공한 코드에 감사 드립니다.효과가 아주 좋아요. 한 번만 수정하면...
내가 짐작컨대 너의 뜻은:

var code = text.match(/^\s*\s*$/) ? '' : text;

대신 다음과 같습니다.

var start = text.match(/^\s*\s*$/, '') : text;

토론 #18

못생긴 es는 여전히 알파입니까, 아니면 우리가 지금 전환해서 사용할 수 있습니까?

토론 #19

토론 #20

은 더 이상 유지보수되지 않습니다.uglify-es 해상도를 사용하여 yarn을 uglify-js으로 교체할 수 있습니다.

$ cat package.json 
{
  "resolutions": {
    "uglify-js": "npm:terser"
  },
  "dependencies": {
    "html-minifier": "3.5.20"
  }
}

$ rm -rf node_modules yarn.lock 

$ yarn --silent --no-progress
warning package.json: No license field
warning No license field

$ cat doc.html 
<!DOCTYPE html>
<html><body>
<pre>
<script>
    document.write(`Hello ES${5 + 1}.`);
</script>
</pre>
</body></html>

$ node_modules/.bin/html-minifier doc.html --minify-js --collapse-whitespace && echo
<!DOCTYPE html><html><body><pre>
<script>document.write("Hello ES6.")</script>
</pre></body></html>

terser 워크코드:
함수 minify es6 (텍스트, 인라인 연결) {
var uglify EsOptions={parse:{bare 반환:{},
틀리다
클래스명 유지: 정확,
침묵: 그래,
사파리10:맞아요.
}

  var code = text.match(/^\s*\s*$/) ? '' : text
  uglifyEsOptions.parse.bare_returns = inline

  var result = Terser.minify(code, uglifyEsOptions)
  if (result.error) {
  console.log('Uglify-es error:', result.error)
  return text
  }
  return result.code.replace(/;$/, '')

}//()

토론 #21

https://www.npmjs.com/package/html-minifier-terser

토론 #22

https://www.npmjs.com/package/html-minifier-terser

감사합니다!얘 성공했어!

토론 #23

은 Terser과 Gulp을 결합하여 사용하고자 하지만 어떻게 사용하는지 확실하지 않은 사람들에게 다음과 같은 예이다.

배경.

나는

토론 #24

플러그인을 통해 html-minifier을 사용한다.이렇게 하면 JavaScript 파일을 사용하여 단순함을 요구하고 API를 사용할 수 있습니다.

솔루션

$ touch htmlmin.config.js

"use strict";

const Terser = require("terser");

module.exports = {
    caseSensitive: false,
    collapseBooleanAttributes: true,
    collapseInlineTagWhitespace: true,
    collapseWhitespace: true,
    conservativeCollapse: false,
    continueOnParseError: false,
    html5: true,
    includeAutoGeneratedTags: false,
    keepClosingSlash: false,
    minifyCSS: true,
    minifyJS: (text, inline) => Terser.minify(text).code,
    minifyURLs: true,
    preserveLineBreaks: false,
    preventAttributesEscaping: false,
    processConditionalComments: false,
    processScripts: false,
    quoteCharacter: "'",
    removeAttributeQuotes: true,
    removeComments: true,
    removeEmptyAttributes: true,
    removeEmptyElements: true,
    removeOptionalTags: true,
    removeRedundantAttributes: true,
    removeScriptTypeAttributes: true,
    removeStyleLinkTypeAttributes: true,
    removeTagWhitespace: false,
    sortAttributes: false,
    sortClassName: false,
    trimCustomFragments: true,
    useShortDoctype: true
};

$ touch gulpfile.js

const htmlmin = require("gulp-htmlmin");
const {src, dest} = require("gulp");
const {resolve} = require("path");
const htmlminConfig = require("./htmlmin.config.js");

const html = () => {
    return src(resolve("sources", "index.html"))
        .pipe(htmlmin(htmlminConfig))
        .pipe(dest(resolve("release")));
};

module.exports = {html};

이제 HTML 파일의 ECMAScript 구문을 축소할 수 있습니다.