안녕하세요 @zekth입니다!

deno에 대한 흥미진진한 계획이 있습니다. 나는 이 프로젝트를 ES 모듈과 호환되게 만드는 것에 대해 매우 긍정적이며 포트를 피하는 것에 대한 귀하의 생각에 전적으로 동의합니다.

이것을 실현하기 위해 무엇이 필요한지 구체적인 생각이 있습니까?

다음은 오늘 아침에 수행한 (정말 못생긴) 포트입니다(typescript에서) https://github.com/zekth/deno_mustache/blob/master/mod.ts

나는 시작을 위해 몇 가지 테스트를 이식했습니다.
내가 가진 유일한 관심사는 콧수염으로 지원하는 모든 다른 환경입니다. 기본 js 파일 ES 모듈이 호환되는 것이 다른 mjs 보다 낫다고 생각하지만 아무 것도 깨고 싶지 않습니다. :)

많은 참고 부탁드립니다! 👍

나는 deno에 대한 경험이 전혀 없기 때문에 몇 가지 토론을 촉발하기 위해 몇 가지 사소한 질문을 시작하겠습니다.

1. 이 작업을 수행하려면 deno에 어떤 요구 사항이 필요합니까? .mjs 파일이어야 합니까 아니면 type="module" 의 package.json 있습니까?
2. 파일 이름 지정 요구 사항이 있습니까?
3. 여기서 TypeScript가 어떻게든 중요합니까?

.. 등등, 어떤 단서라도 많이 주시면 감사하겠습니다. 현재로서는 deno에 대한 지식이 너무 부족하여 이를 해결하는 그럴듯한 방법에 대해 창의적으로 생각할 수 없습니다.

1. 라이브러리만 ES 모듈이면 되기 때문에 특별한 요구 사항은 없습니다. 예제 lodash 는 이식 없이 작동합니다. 모듈 로드는 패키지 json 또는 기타 없이 HTTP 가져오기를 통해 이루어집니다.
2. 명명 규칙 없음
3. JavaScript의 TypeScript를 사용할 수 있으며 Deno는 둘 다 처리합니다.

예를 들어 deno에서 콧수염을 사용하는 것은 다음과 같습니다.

import * as mustache from 'https://raw.githubusercontent.com/janl/mustache.js/master/mustache.js'
mustache.render(......

더 많은 정보를 원하시면 Ryan의 이 강연을 확인 하세요 :

시원한!

그래서 여기에 몇 가지 생각과 맥락을 공유할 수 있는 몇 가지 이야기가 있습니다. ES 모듈에 대한 나의 이해는 export ed의 관점에서 구문 분석이 가능하다는 것입니다. 이는 본질적으로 훨씬 더 역동적인 CommonJS, AMD 등과 같은 선구자들과 어두운 대조를 이룹니다.

이를 염두에 두고, 현재 코드가 실행 중인 모듈 시스템을 감지하는 기능을 의미하는 오늘날 mustache.js의 본문을 둘러싼 IIFE 가 ES 모듈 영역에서 작동하지 않을 것이라고 가정하고 있습니다. m 틀렸어!

즉, zekth/deno_mustache/mod.ts#L689 포트에 있는 것과 같이 평범하고 단순한 export ... 가 있는 .js | .mjs | .ts 파일이 있어야 합니다.

재미는 우리가 이전 동작을 유지하고 다른 모듈 시스템을 사용하는 프로젝트와 호환성을 유지하거나 심지어 모듈 시스템이 전혀 필요하지 않을 때 시작됩니다. 따라서 언급된 IIFE 래퍼가 필요합니다. 서버와 브라우저에서 실행됩니다.

두 개의 서로 다른 구현(ES 모듈 + 나머지)을 동기화 상태로 유지하고 싶지 않기 때문에 빌드 단계를 고려할 가치가 있다고 느끼기 시작합니다. 예를 들어 소스 코드를 ES 모듈 스타일로 작성했다면 빌드 단계에서 오늘날과 같이 ES 모듈이 아닌 모듈로 변환할 수 있습니다. 또는 덜 방해가 되는 경우에는 그 반대입니다.

마지막으로 저는 가능한 한 작은 단계를 수행하는 것을 좋아합니다. 나는 일반적으로 TypeScript에 대해 긍정적이지만, 우리가 ES 모듈에 계속 초점을 맞추고 TypeScript/export typedef로 변환할지 여부에 초점을 맞춘 다른 라운드를 수행해도 괜찮습니까?

생각나는 다른 생각이나 수정 사항이 있습니까?

맞습니다. 첫 번째 단계는 TypeScript 스택을 추가하고 컴파일러를 사용하여 commonjs/ES5/ES6 등과 같은 여러 파일을 출력하는 것입니다( https://www.typescriptlang.org/docs/handbook/compiler-options .html ) . TS 컴파일러를 사용한다고 해서 TypeScript를 사용해야 하는 것은 아니며 ES6 코드도 사용할 수 있습니다.

오 좋은 제안이네요! 처음에는 ES -> 다른 모듈 시스템에서 TS 컴파일러를 일반 빌드 도구로 사용하려고 합니다. 그러면 나중에 그럴듯한 TS 변환이 훨씬 덜 위험해집니다.

그 접근 방식을 시도할 수 있습니까? 한 번에 모든 것을 해결할 필요는 없지만 최소한 첫 번째 빌딩 블록은 해결해야 합니다. 구체적인 내용을 살펴보고 향후 논의의 기반이 되는 것이 있다면 정말 가치가 있을 것입니다.

Sooo 나는 ES 모듈로의 전환을 시도했습니다.

내 개념 증명은 주로 생성되는 UMD 버전 때문에 TypeScript 컴파일러(또는 babel) 대신 rollup.js를 사용하게 되었습니다. 우리는 여전히 이전 모듈 시스템과의 호환성을 유지하거나 모듈 시스템이 전혀 필요하지 않습니다.

예상대로 작동하는지 확인하기 위해 deno를 사용하여 테스트할 의향이 있습니까? philipj/mustache.js#esm-ify mustache.mjs

@philipj 가 할 것입니다!

몇 가지 오류가 있지만 사소한 수정 사항이라고 생각합니다.

error TS2339: Property 'render' does not exist on type '{ name: string; version: string; tags: string[]; }'.

► file:///Users/vlegoff/projects/genesys/github/telemetry/t/mustache.ts:10:23

10 var output = mustache.render('{{title}} spends {{calc}}', view);
                         ~~~~~~

error TS2554: Expected 2 arguments, but got 1.

► https://raw.githubusercontent.com/phillipj/mustache.js/esm-ify/mustache.mjs:525:52

525   var context = (view instanceof Context) ? view : new Context(view);
                                                       ~~~~~~~~~~~~~~~~~

  An argument for 'parentContext' was not provided.

    ► https://raw.githubusercontent.com/phillipj/mustache.js/esm-ify/mustache.mjs:377:25

    377 function Context (view, parentContext) {
                                ~~~~~~~~~~~~~


error TS2339: Property 'escape' does not exist on type '{ name: string; version: string; tags: string[]; }'.

► https://raw.githubusercontent.com/phillipj/mustache.js/esm-ify/mustache.mjs:640:21

640     return mustache.escape(value);
                        ~~~~~~

error TS2339: Property 'clearCache' does not exist on type '{ name: string; version: string; tags: string[]; }'.

► https://raw.githubusercontent.com/phillipj/mustache.js/esm-ify/mustache.mjs:659:10

659 mustache.clearCache = function clearCache () {
             ~~~~~~~~~~

error TS2339: Property 'parse' does not exist on type '{ name: string; version: string; tags: string[]; }'.

► https://raw.githubusercontent.com/phillipj/mustache.js/esm-ify/mustache.mjs:668:10

668 mustache.parse = function parse (template, tags) {
             ~~~~~

error TS2339: Property 'render' does not exist on type '{ name: string; version: string; tags: string[]; }'.

► https://raw.githubusercontent.com/phillipj/mustache.js/esm-ify/mustache.mjs:678:10

678 mustache.render = function render (template, view, partials, tags) {
             ~~~~~~

error TS2339: Property 'to_html' does not exist on type '{ name: string; version: string; tags: string[]; }'.

► https://raw.githubusercontent.com/phillipj/mustache.js/esm-ify/mustache.mjs:690:10

690 mustache.to_html = function to_html (template, view, partials, send) {
             ~~~~~~~

error TS2339: Property 'render' does not exist on type '{ name: string; version: string; tags: string[]; }'.

► https://raw.githubusercontent.com/phillipj/mustache.js/esm-ify/mustache.mjs:693:25

693   var result = mustache.render(template, view, partials);
                            ~~~~~~

error TS2339: Property 'escape' does not exist on type '{ name: string; version: string; tags: string[]; }'.

► https://raw.githubusercontent.com/phillipj/mustache.js/esm-ify/mustache.mjs:704:10

704 mustache.escape = escapeHtml;
             ~~~~~~

error TS2339: Property 'Scanner' does not exist on type '{ name: string; version: string; tags: string[]; }'.

► https://raw.githubusercontent.com/phillipj/mustache.js/esm-ify/mustache.mjs:707:10

707 mustache.Scanner = Scanner;
             ~~~~~~~

error TS2339: Property 'Context' does not exist on type '{ name: string; version: string; tags: string[]; }'.

► https://raw.githubusercontent.com/phillipj/mustache.js/esm-ify/mustache.mjs:708:10

708 mustache.Context = Context;
             ~~~~~~~

error TS2339: Property 'Writer' does not exist on type '{ name: string; version: string; tags: string[]; }'.

► https://raw.githubusercontent.com/phillipj/mustache.js/esm-ify/mustache.mjs:709:10

709 mustache.Writer = Writer;
             ~~~~~~


Found 12 errors.

암호:

import mustache from 'https://raw.githubusercontent.com/phillipj/mustache.js/esm-ify/mustache.mjs';

var view = {
  title: 'Joe',
  calc: function() {
    return 2 + 4;
  },
};

var output = mustache.render('{{title}} spends {{calc}}', view);

console.log(output);

.mjs 파일에 대해 홍보를 하시겠습니까?

감사 해요!

내가 처음에 하려고 했던 것에 대해 좀 더 많은 맥락을 공유해야 한다는 것을 이제 깨닫습니다. 죄송합니다.

앞서 논의한 바와 같이 TypeScript 컴파일러를 사용한 초기 시도에서도 지금 제공한 것과 다소 유사한 몇 가지 오류가 발생했습니다. 그럼에도 불구하고 출력을 생성하고 내가 원하는 것과 매우 가깝다는 사실에 놀랐습니다.

내가 만족하지 못한 것은 컴파일된 출력을 감싸는 UMD 코드였습니다. 주로 두 가지:

1. 패키지 내용을 전역 범위에 노출하는 대체 기능이 없습니다( window.Mustache 생각). 이것은 모듈 시스템이 없는 사용자에게 매우 중요합니다.
2. CommonJS와 프로젝트에서이 패키지의 내용으로 노출 module.exports.default 보다는 module.exports . CommonJS require() 가 ES 모듈일 때 그것이 올바르고 예상된 동작일 수 있지만, 이는 내가 피하고 싶었던 이전 버전과의 호환성을 깨뜨릴 것입니다.

내 주요 목표는 무엇보다도 소스 코드를 TypeScript를 도입하지 않고 ES 모듈로 전환하는 것이었기 때문에 다른 컴파일러/번들러를 사용하여 위의 두 가지 문제를 피하기 위해 다른 작업을 수행하는지 확인하기로 결정했습니다.

따라서 내가 rollup.js로 끝난 이유. UMD 출력은 우리가 필요로 하는 것이며 이 패키지의 사용자에게 주요 변경 사항을 일으키지 않습니다.

내 실제 질문에 Sooo; 지금 TypeScript에 관심을 가져야 합니까?

이 논의의 앞부분에서 내가 이해한 바는 TypeScript로 완전히 전환되지 않은 것으로 간주할 수 있다는 것입니다. 그럼에도 불구하고 실제로 ES 모듈이라면 deno 도움이 될 것이지만 제가 약간 오해했을 수도 있습니다.

주요 문제는 다음과 같은 콧수염의 첫 번째 초기화라고 생각합니다.
https://github.com/janl/mustache.js/blob/master/mustache.js#L14

또한 이것은 https://github.com/janl/mustache.js/blob/master/mustache.js#L536
new Context(view, null) 로 다시 쓸 수 있습니다.

당신은 생각하지 않습니다?

가장 큰 문제는 콧수염의 첫 번째 초기화라고 생각합니다.

당신이 옳을 것입니다. .mjs 버전 에서는 UMD 래퍼에서 전달된 개체가 아닌 실제 소스 코드로 이동하려고 했습니다.

var mustache = {
  name: 'mustache.js',
  version: version,
  tags: [ '{{', '}}' ]
}

TypeScript 오류를 수정하는 접근 방식을 보면 멋질 것입니다 👍

새로운 Context(view, null)로 다시 작성할 수 있습니다.

거의.. new Context(view, undefined) 는 두 번째 인수를 전혀 전달하지 않는 것과 동일하지 않습니까?

예 new Context 에 대해 정확합니다.

그렇게 노력하겠습니다 :)

여기 홍보가 있습니다: https://github.com/phillipj/mustache.js/pull/1
CI가 손상되었지만 보풀이 발생하는 메시지를 받은 이유를 모르겠습니다.

굉장합니다, 정말 감사합니다! 앞으로 며칠간 꽤 바빠서, 이번주가 끝나기 전에 최선을 다해 리뷰하겠습니다.

상태 업데이트; 내 esm-ify 브랜치 에 대해 연 PR에서 언급했듯이 이제 이 패키지가 #724에서 수년간 지원해 온 다른 모듈 시스템에 대해 의도한 대로 작동하는지 확인하는 몇 가지 테스트가 있습니다.

누군가 이의를 제기하거나 마음에 더 많은 조정이 있는 경우를 대비하여 몇 가지 개선 사항을 푸시한 대로 며칠 동안 양조하도록 하겠습니다.

이러한 테스트가 완료되면 이 프로젝트를 ES 모듈로 작성된 소스 코드로 전환하고 오늘 mustache.js 에 있는 것을 생성하는 단계를 빌드하는 것이 편안해집니다. 물론 완료될 것입니다. 다가오는 PR에서.

728은 공개 조사를 위해 공개되었습니다.