proscenium
v0.18.0
뱃머리 · 보세요 · 네 · 음
명사 : 프로시니엄
- 커튼 앞의 극장 무대 부분.
Proscenium은 프런트엔드와 클라이언트측 코드를 Rails 앱의 일급 시민으로 취급하며 "기본적으로 빠른" 인터넷을 가정합니다. JavaScript(+ JSX), TypeScript(+TSX) 및 CSS를 실시간, 요청 시 구성 없이 번들로 묶고 축소합니다.
하이라이트:
rails s 실행하기만 하면 됩니다!시작하는 방법은 기존 Rails 앱에 Proscenium을 추가하는지 아니면 새 앱을 생성하는지에 따라 달라집니다. 따라서 아래에서 적절한 가이드를 선택하세요.
Rails 애플리케이션의 Gemfile에 다음 줄을 추가하면 됩니다.
gem 'proscenium'Proscenium은 Rails에만 사용하도록 설계되었습니다.
이제 Rails 앱을 시작하면 모든 프런트 엔드 코드(JS, CSS 등)를 열 수 있습니다. 예를 들어, app/assets/stylesheets/application.css 의 파일은 https://localhost:3000/app/assets/stylesheets/application.css 에서 액세스할 수 있으며, 이는 [프로덕션에서] 번들로 묶이고 변환되고 축소됩니다. 실시간으로.
Proscenium은 프론트엔드 코드가 백엔드 코드만큼 중요하며 나중에 고려하지 않고 Rails 앱의 일류 시민이 되어야 한다고 믿습니다. 따라서 모든 JS와 CSS를 "app/assets" 디렉토리에 넣고 컴파일하거나 번들링하기 위해 별도의 프로세스를 요구하는 대신 앱 내에서 원하는 위치에 배치하고 Rails를 실행하기만 하면 됩니다!
예를 들어, app/views/users/index.html.erb 뷰에 필요한 일부 JS가 있는 경우 app/views/users/index.js 에서 그와 함께 JS 파일을 생성하면 됩니다. 또는 전체 애플리케이션에서 사용되는 CSS가 있는 경우 app/views/layouts/application.css 에 넣고 레이아웃과 함께 로드하세요. JS 유틸리티 함수가 몇 가지 있을 수 있으므로 lib/utils.js 에 넣으세요.
JS(X)와 CSS를 원하는 곳에 간단히 배치하면 해당 위치에서 Rails 앱이 제공됩니다.
위의 예를 사용하면...
app/views/users/index.js => https://localhost:3000/app/views/users/index.jsapp/views/layouts/application.css => https://localhost:3000/app/views/layouts/application.csslib/utils.js => https://localhost:3000/lib/utils.jsapp/components/menu_component.jsx => https://localhost:3000/app/components/menu_component.jsxconfig/properties.css => https://localhost:3000/config/properties.css Proscenium은 자산이 자동으로 측면 로드될 때 가장 잘 경험됩니다.
Rails에서는 일반적으로 javascript_include_tag 및 stylesheet_link_tag 도우미를 사용하여 JavaScript 및 CSS 자산을 선언적으로 로드합니다.
예를 들어 /app/assets/stylesheets/application.css 파일에 최상위 "application" CSS가 있을 수 있습니다. 마찬가지로 /app/javascript/application.js 파일에 전역 JavaScript가 있을 수 있습니다.
다음과 같이 애플리케이션 레이아웃에 해당 두 파일을 수동으로 선언적으로 포함합니다.
<%# /app/views/layouts/application.html.erb %>
<!DOCTYPE html >
< html >
< head >
< title > Hello World </ title >
<%= stylesheet_link_tag 'application' %> <!-- << Your app CSS -->
</ head >
< body >
<%= yield %>
<%= javascript_include_tag 'application' %> <!-- << Your app JS -->
</ body >
</ html >이제 특정 뷰와 부분에만 필요한 일부 CSS 및 JavaScript가 있을 수 있으므로 이를 뷰(또는 레이아웃)에 다음과 같이 로드합니다.
<%# /app/views/users/index.html.erb %>
<%= stylesheet_link_tag 'users' %>
<%= javascript_include_tag 'users' %>
<%# needed by the `users/_user.html.erb` partial %>
<%= javascript_include_tag '_user' %>
<% render @users %> 주요 문제는 이러한 모든 자산을 추적하고 각 자산이 필요한 모든 보기에 의해 로드되는지 확인해야 하지만 필요하지 않을 때는 로드하지 말아야 한다는 것입니다. 이는 특히 조회수가 많을 때 정말 고통스러울 수 있습니다.
Proscenium을 사용하여 JavaScript, Typescript 및 CSS를 측면 로드하면 뷰, 부분, 레이아웃 및 구성 요소와 함께 필요한 경우에만 자동으로 포함됩니다.
사이드 로딩은 뷰, 부분, 레이아웃 또는 구성 요소와 동일한 이름을 가진 JS/TS/CSS 파일을 찾는 방식으로 작동합니다. 예를 들어 app/views/users/index.html.erb 에 뷰가 있는 경우 Proscenium은 app/views/users/index.js , app/views/users/index.ts 에서 JS/TS/CSS 파일을 찾습니다. app/views/users/index.ts 또는 app/views/users/index.css . 하나를 찾으면 해당 보기의 HTML에 포함됩니다.
JSX는 JavaScript 및 Typescript에도 지원됩니다. .js 또는 .ts 대신 .jsx 또는 .tsx 확장자를 사용하면 됩니다.
뷰, 부분 또는 레이아웃과 동일한 이름을 가진 JS 및/또는 CSS 파일을 생성하기만 하면 됩니다.
다음과 같은 자산이 있는 위의 문제 예를 계속 진행해 보겠습니다.
/app/assets/application.css/app/assets/application.js/app/assets/users.css/app/assets/users.js/app/assets/user.js 애플리케이션 레이아웃은 /app/views/layouts/application.hml.erb 에 있고 사용자 자산이 필요한 뷰는 /app/views/users/index.html.erb 에 있으므로 자산 JS 및 CSS를 그와 함께 이동하세요. :
/app/views/layouts/application.css/app/views/layouts/application.js/app/views/users/index.css/app/views/users/index.js/app/views/users/_user.js (일부) 이제 레이아웃과 보기에서 javascript_include_tag 및 stylesheet_link_tag 도우미를 Proscenium의 include_asset 도우미로 바꾸세요. 다음과 같은 것 :
<!DOCTYPE html >
< html >
< head >
< title > Hello World </ title >
<%= include_assets # <-- %>
</ head >
< body >
<%= yield %>
</ body >
</ html > 각 페이지 요청에서 Proscenium은 뷰, 레이아웃 및 부분에 동일한 이름의 JS/TS/CSS 파일이 있는지 확인한 다음 include_assets 도우미를 배치한 위치에 이를 포함시킵니다.
이제 자산을 다시 포함하는 것을 기억할 필요가 없습니다. 뷰, 부분 및 레이아웃과 함께 생성하기만 하면 나머지는 Proscenium이 처리해 드립니다.
사이드 로딩은 기본적으로 활성화되어 있지만 /config/application.rb 에서 config.proscenium.side_load false 로 설정하여 비활성화할 수 있습니다.
CSS 및 JS 자산이 HTML에 포함되는 위치를 제어할 수 있는 include_stylesheets 및 include_javascripts 도우미도 있습니다. 자산이 포함되는 위치를 정확하게 제어하려면 include_assets 대신 이러한 도우미를 사용해야 합니다.
파일을 묶는다는 것은 가져온 종속성을 파일 자체에 인라인하는 것을 의미합니다. 이 프로세스는 재귀적이므로 종속성 등의 종속성도 인라인됩니다.
Proscenium은 기본적으로 실시간으로 번들로 제공됩니다. 따라서 별도의 빌드 단계나 사전 컴파일이 없습니다.
Proscenium은 NPM, URL, 로컬 앱, 심지어 다른 Ruby Gems에서도 JS, JSX, TS, TSX, CSS 및 SVG 가져오기를 지원합니다.
JavaScript 및 TypeScript에 대해 정적( import ) 및 동적( import() ) 가져오기가 모두 지원되며 JS, TS, JSX, TSX, JSON, CSS 및 SVG 파일을 가져오는 데 사용할 수 있습니다.
@import CSS at-규칙은 CSS에 대해 지원됩니다.
가져오기 경로는 현재 문자열 리터럴 또는 glob 패턴인 경우에만 번들로 제공됩니다. 다른 형태의 가져오기 경로는 번들로 제공되지 않으며 대신 생성된 출력에 그대로 보존됩니다. 이는 번들링이 컴파일 타임 작업이고 Proscenium이 모든 형태의 런타임 경로 확인을 지원하지 않기 때문입니다.
다음은 몇 가지 예입니다.
// Analyzable imports (will be bundled)
import "pkg" ;
import ( "pkg" ) ;
import ( `./locale- ${ foo } .json` ) ;
// Non-analyzable imports (will not be bundled)
import ( `pkg/ ${ foo } ` ) ;분석할 수 없는 가져오기를 해결하는 방법은 문제가 있는 코드가 포함된 패키지를 번들에 포함되지 않도록 번들 해제된 것으로 표시하는 것입니다. 그런 다음 런타임에 번들 코드에 외부 패키지의 복사본을 사용할 수 있는지 확인해야 합니다.
node_modules ) 베어 가져오기( ./ , / , https:// , http:// 로 시작하지 않는 가져오기)는 완벽하게 지원되며 위치한 package.json 파일을 통해 선택한 패키지 관리자(예: NPM, Yarn, pnpm)를 사용합니다. Rails 앱의 루트에 있습니다.
선택한 패키지 관리자를 사용하여 가져오려는 패키지를 설치합니다.
npm install react
...다른 패키지와 마찬가지로 가져옵니다.
import React from "react" ;물론 상대 또는 절대 경로를 사용하여 자신의 코드를 가져올 수 있습니다(파일 확장자는 선택 사항이며 절대 경로는 Rails 루트를 기본으로 사용합니다).
import utils from "/lib/utils" ;
import constants from "./constants" ;
import Header from "/app/components/header" ; @import "/lib/reset" ; 때로는 가져오기를 번들로 묶고 싶지 않을 때도 있습니다. 예를 들어, React 인스턴스가 하나만 로드되도록 하려고 합니다. 이 경우 unbundle 접두사를 사용할 수 있습니다.
import React from "unbundle:react" ;이는 베어 및 로컬 가져오기에만 작동합니다.
또한 가져오기 맵에서 unbundle 접두사를 사용하면 특정 경로의 모든 가져오기가 항상 번들 해제되도록 할 수 있습니다.
{
"imports" : {
"react" : " unbundle:react "
}
}그런 다음 정상적으로 가져옵니다.
import React from "react" ; [WIP]
JS와 CSS에 대한 가져오기 맵은 기본적으로 지원되며 사용 중인 브라우저에 관계없이 작동합니다. 이는 가져오기 맵이 브라우저가 아닌 서버의 Proscenium에 의해 구문 분석되고 해결되기 때문입니다. 이는 더 빠르며 아직 지원하지 않는 브라우저에서 가져오기 맵을 사용할 수도 있습니다.
가져오기 맵에 익숙하지 않은 경우 이를 별칭을 정의하는 방법으로 생각하십시오.
config/import_map.json 생성하고 사용하려는 가져오기를 지정하기만 하면 됩니다. 예를 들어:
{
"imports" : {
"react" : " https://esm.sh/[email protected] " ,
"start" : " /lib/start.js " ,
"common" : " /lib/common.css " ,
"@radix-ui/colors/" : " https://esm.sh/@radix-ui/[email protected]/ "
}
}위의 가져오기 맵을 사용하여 다음을 수행할 수 있습니다.
import { useCallback } from "react" ;
import startHere from "start" ;
import styles from "common" ;그리고 CSS의 경우...
@import "common" ;
@import "@radix-ui/colors/blue.css" ; JSON 대신 JavaScript로 가져오기 맵을 작성할 수도 있습니다. 따라서 config/import_map.json 대신 config/import_map.js 만들고 익명 함수를 정의하세요. 이 함수는 단일 environment 인수를 허용합니다.
( env ) => ( {
imports : {
react :
env === "development"
? "https://esm.sh/[email protected]?dev"
: "https://esm.sh/[email protected]" ,
} ,
} ) ; 소스 맵을 사용하면 코드 디버깅이 더 쉬워집니다. 생성된 출력 파일의 행/열 오프셋을 해당 원본 입력 파일의 행/열 오프셋으로 다시 변환하는 데 필요한 정보를 인코딩합니다. 이는 생성된 코드가 원본 코드와 충분히 다른 경우에 유용합니다(예: 원본 코드가 TypeScript이거나 축소를 활성화한 경우). 이는 하나의 큰 번들 파일 대신 브라우저의 개발자 도구에서 개별 파일을 보는 것을 선호하는 경우에도 유용합니다.
소스 맵 출력은 JavaScript와 CSS 모두에서 지원됩니다. 각 파일에는 소스 맵에 대한 링크가 추가됩니다. 예를 들어:
//# sourceMappingURL=/app/views/layouts/application.js.map브라우저 개발 도구는 이를 선택하고 필요할 때 언제 어디서나 소스 맵을 자동으로 로드해야 합니다.
SVG 소스 코드를 번들로 제공하는 JS(X)에서 SVG를 가져올 수 있습니다. 또한 JSX 또는 TSX에서 가져오는 경우 SVG 소스 코드는 JSX/TSX 구성 요소로 렌더링됩니다.
>=0.10.0에서 사용 가능
proscenium.env 네임스페이스 아래의 JavaScript 및 Typescript에서 모든 환경 변수를 정의하고 액세스할 수 있습니다.
성능 및 보안상의 이유로 config/application.rb 파일에 노출하려는 환경 변수 이름을 선언해야 합니다.
config . proscenium . env_vars = Set [ 'API_KEY' , 'SOME_SECRET_VARIABLE' ]
config . proscenium . env_vars << 'ANOTHER_API_KEY' 이는 동일한 이름의 환경 변수가 이미 정의되어 있다고 가정합니다. 그렇지 않다면 Ruby의 ENV 객체를 사용하는 코드나 셸에서 직접 정의해야 합니다.
이렇게 선언된 환경 변수는 상수 표현식으로 대체되어 다음과 같이 사용할 수 있습니다.
console . log ( proscenium . env . RAILS_ENV ) ; // console.log("development")
console . log ( proscenium . env . RAILS_ENV === "development" ) ; // console.log(true) RAILS_ENV 및 NODE_ENV 환경 변수는 항상 자동으로 선언됩니다.
이 외에도 Proscenium은 proscenium.env.RAILS_ENV 와 동일한 값으로 설정되는 process.env.NODE_ENV 변수도 제공합니다. 이는 종종 이 변수에 의존하는 커뮤니티의 기존 도구를 지원하기 위해 제공됩니다.
환경 변수는 트리 흔들기를 돕는 데 특히 강력합니다.
function start ( ) {
console . log ( "start" ) ;
}
function doSomethingDangerous ( ) {
console . log ( "resetDatabase" ) ;
}
proscenium . env . RAILS_ENV === "development" && doSomethingDangerous ( ) ;
start ( ) ; 개발 중에 위 코드는 다음 코드로 변환되어 정의를 삭제하고 doSomethingDangerous() 를 호출합니다.
function start ( ) {
console . log ( "start" ) ;
}
start ( ) ;보안상의 이유로 환경 변수는 URL 가져오기에서 대체되지 않습니다.
정의되지 않은 환경 변수는 undefined 변수로 대체됩니다.
console . log ( proscenium . env . UNKNOWN ) ; // console.log((void 0).UNKNOWN)이는 이에 의존하는 코드가 트리 흔들림이 발생하지 않음을 의미합니다. 선택적 연결 연산자를 사용하여 이 문제를 해결할 수 있습니다.
if ( typeof proscenium . env ?. UNKNOWN !== "undefined" ) {
// do something if UNKNOWN is defined
} config/locales/*.yml 에서 Rails 로케일 파일을 가져와 JSON으로 내보내는 기본 지원이 제공됩니다.
import translations from "@proscenium/i18n" ;
// translations.en.* 기본적으로 Proscenium의 출력은 ES2022 사양 및 이전 버전의 모든 최신 JS 기능을 활용합니다. 예를 들어, a !== void 0 && a !== null ? a : b a ?? b 축소할 때(프로덕션에서는 기본적으로 활성화됨) ES2020 버전의 JavaScript 구문을 사용합니다. ES2020에서 지원되지 않는 모든 구문 기능은 더 광범위하게 지원되는 이전 JavaScript 구문으로 변환됩니다.
트리 쉐이킹은 JavaScript 커뮤니티에서 도달할 수 없는 코드를 자동으로 제거하는 일반적인 컴파일러 최적화인 데드 코드 제거를 위해 사용하는 용어입니다. Proscenium에서는 트리 흔들기가 기본적으로 활성화되어 있습니다.
function one ( ) {
console . log ( "one" ) ;
}
function two ( ) {
console . log ( "two" ) ;
}
one ( ) ; 위의 코드는 호출되지 않으므로 two() 버리고 다음 코드로 변환됩니다.
function one ( ) {
console . log ( "one" ) ;
}
one ( ) ;
>=0.10.0에서 사용 가능합니다.
측면 로드된 자산은 자동으로 코드 분할됩니다. 즉, 여러 번 가져오고 가져온 파일이 있고 다른 파일별로 사용되는 경우 별도의 파일로 분할됩니다.
예를 들면:
// /lib/son.js
import father from "./father" ;
father ( ) + " and Son" ; // /lib/daughter.js
import father from "./father" ;
father ( ) + " and Daughter" ; // /lib/father.js
export default ( ) => "Father" ; son.js 와 daughter.js 모두 father.js 가져오므로 아들과 딸 모두 일반적으로 father의 복사본을 포함하므로 코드가 중복되고 번들 크기가 더 커집니다.
이러한 파일을 사이드 로드하면 father.js 별도의 파일이나 청크로 분할되어 한 번만 다운로드됩니다.
여러 진입점 간에 공유되는 코드는 두 진입점이 모두 가져오는 별도의 공유 파일로 분할됩니다. 이렇게 하면 사용자가 처음에 한 페이지를 탐색한 다음 다른 페이지를 탐색할 때 공유 부분이 이미 다운로드되어 브라우저에 캐시되어 있는 경우 두 번째 페이지에 대한 모든 JavaScript를 처음부터 다운로드할 필요가 없습니다.
비동기 import() 표현식을 통해 참조되는 코드는 별도의 파일로 분할되며 해당 표현식이 평가될 때만 로드됩니다. 이를 통해 시작 시 필요한 코드만 다운로드하고 나중에 필요한 경우 추가 코드를 느리게 다운로드하여 앱의 초기 다운로드 시간을 개선할 수 있습니다.
코드 분할이 없으면 import() 표현식은 대신 Promise.resolve().then(() => require()) 가 됩니다. 이는 여전히 표현식의 비동기 의미를 유지하지만 가져온 코드가 별도의 파일로 분할되는 대신 동일한 번들에 포함된다는 의미입니다.
코드 분할은 기본적으로 활성화되어 있습니다. 애플리케이션의 /config/application.rb 에서 code_splitting 구성 옵션을 false 로 설정하여 이를 비활성화할 수 있습니다.
config . proscenium . code_splitting = falseJavaScript에 관한 한 몇 가지 중요한 주의 사항이 있습니다. 이에 대한 자세한 내용은 esbuild 사이트에 나와 있습니다.
CSS는 Proscenium의 최고 수준 콘텐츠 유형입니다. 즉, JavaScript 코드에서 CSS를 가져올 필요 없이 CSS 파일을 직접 묶을 수 있습니다. url() 사용하여 다른 CSS 파일과 참조 이미지 및 글꼴 파일을 @import 할 수 있으며 Proscenium은 모든 것을 함께 묶습니다.
기본적으로 Proscenium의 출력은 모든 최신 CSS 기능을 활용합니다. 예를 들어 color: rgba(255, 0, 0, 0.4) 프로덕션에서 축소된 후 color: #f006 이 되며 이는 CSS 색상 모듈 레벨 4의 구문을 사용합니다.
새로운 CSS 중첩 구문이 지원되며 이전 브라우저의 경우 중첩되지 않은 CSS로 변환됩니다.
Proscenium은 또한 CSS가 이전 브라우저에서 작동할 수 있도록 공급업체 접두사를 자동으로 삽입합니다.
JavaScript에서 CSS를 가져올 수도 있습니다. 이렇게 하면 Proscenium은 각 스타일시트를 <link> 요소로 문서 헤드에 자동으로 추가합니다.
import "./button.css" ;
export let Button = ( { text } ) => {
return < div className = "button" > { text } < / div > ;
} ; Proscenium은 CSS 모듈의 하위 집합을 구현합니다. :local 및 :global 키워드는 지원하지만 composes 속성은 지원하지 않습니다. ( composes 대신 mixin을 사용하는 것이 좋습니다. 일반 CSS 파일에서도 어디에서나 작동하기 때문입니다.)
CSS 파일에 .module.css 확장자를 부여하면 Proscenium은 이를 CSS 모듈로 처리하여 파일 고유의 접미사를 사용하여 모든 클래스 이름을 변환합니다.
. title {
font-size : 20 em ;
}위 입력은 다음을 생성합니다.
. title-5564cdbb {
font-size : 20 em ;
}이제 어디에서나 사용할 수 있는 고유한 클래스 이름이 생겼습니다.
하나 이상의 클래스 이름을 허용하고 동등한 CSS 모듈 이름(고유 접미사가 추가된 클래스 이름)을 반환하는 css_module 도우미를 사용하여 Rails 보기, 부분 및 레이아웃에서 CSS 모듈을 참조할 수 있습니다.
사이드 로딩 설정을 사용하면 다음과 같이 css_module 도우미를 사용할 수 있습니다.
< div >
< h1 class =" <%= css_module :hello_title %> " > Hello World </ h1 >
< p class =" <%= css_module :body , paragraph : %> " >
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</ p >
</ div > css_module 여러 클래스 이름을 허용하며 변환된 CSS 모듈 이름의 공백으로 구분된 문자열을 반환합니다.
css_module :my_module_name
# => "my_module_name-ABCD1234"클래스 이름의 접두어로 파일의 URL 경로를 전달하여 CSS 파일에서 클래스를 참조할 수도 있습니다. 이렇게 하면 스타일시트가 자동으로 사이드로드됩니다.
css_module '/app/components/button.css@big_button'
# => "big_button"또한 NPM 패키지(/node_modules에 이미 설치되어 있음)도 지원합니다.
css_module 'mypackage/button@big_button'
# => "big_button" css_module CSS 파일의 경로를 지정할 수 있는 path 키워드 인수도 허용합니다. css_module 인스턴스에 전달된 모든 클래스 이름에 대해 지정된 경로를 사용합니다.
css_module :my_module_name , path : Rails . root . join ( 'app/components/button.css' ) JS에서 CSS 모듈을 가져오면 스타일시트가 문서 헤드에 자동으로 추가됩니다. 그리고 가져오기의 결과는 모듈 이름에 대한 CSS 클래스의 객체가 됩니다.
import styles from "./styles.module.css" ;
// styles == { header: 'header-5564cdbb' }CSS 모듈 이름의 내보낸 개체는 실제로 JavaScript 프록시 개체라는 점에 유의하는 것이 중요합니다. 따라서 객체를 구조 분해하는 것은 작동하지 않습니다. 대신 속성에 직접 액세스해야 합니다.
또한 CSS 모듈을 다른 CSS 모듈로 가져오면 모든 클래스에 대해 동일한 다이제스트 문자열이 생성됩니다.
Proscenium은 하나 이상의 CSS 클래스를 다른 클래스에 포함하거나 "혼합"하는 기능을 제공합니다. 이는 CSS 모듈의 composes 속성과 유사하지만 어디에서나 작동하며 CSS 모듈에만 국한되지 않습니다.
CSS 믹스인은 @define-mixin 및 @mixin at-규칙을 사용하여 지원됩니다.
믹스인은 @define-mixin at-rule을 사용하여 정의됩니다. 클래스 이름 의미를 준수해야 하는 이름을 전달하고 규칙을 선언합니다.
// /lib/mixins.css
@define-mixin bigText {
font-size : 50 px ;
} @mixin at-rule을 사용하여 믹스인을 사용하세요. 사용하려는 믹스인의 이름과 믹스인이 선언된 URL을 전달하세요. URL은 믹스인을 확인하는 데 사용되며 상대, 절대, URL 또는 심지어 NPM 패키지일 수도 있습니다.
// /app/views/layouts/application.css
p {
@mixin bigText from url ( "/lib/mixins.css" );
color : red;
}위의 내용은 다음과 같은 출력을 생성합니다.
p {
font-size : 50 px ;
color : red;
}믹스인은 모든 CSS 파일에서 선언될 수 있습니다. 사용되는 위치와 동일한 파일에서 선언할 필요는 없습니다. 그러나 동일한 파일에서 믹스인을 선언하고 사용하는 경우 해당 믹스인이 선언된 URL을 지정할 필요가 없습니다.
@define-mixin bigText {
font-size : 50 px ;
}
p {
@mixin bigText;
color : red;
}CSS 모듈과 믹스인은 완벽하게 함께 작동합니다. CSS 모듈에 믹스인을 포함할 수 있습니다.
CSS에 관한 한 몇 가지 중요한 주의 사항이 있습니다. 이에 대한 자세한 내용은 esbuild 사이트에 나와 있습니다.
Typescript 및 TSX는 기본적으로 지원되며 TypeScript 구문 분석 및 유형 주석 삭제에 대한 지원이 내장되어 있습니다. 파일 이름을 .ts 또는 .tsx 로 바꾸면 됩니다.
Proscenium은 유형 검사를 수행하지 않으므로 유형을 확인하려면 Proscenium과 병렬로 tsc -noEmit 실행해야 합니다.
Typescript와 관련하여 몇 가지 중요한 주의 사항이 있습니다. 이에 대한 자세한 내용은 esbuild 사이트에 나와 있습니다.
JSX 구문을 사용하려면 일반적으로 사용 중인 JSX 라이브러리를 수동으로 가져와야 합니다. 예를 들어 React를 사용하는 경우 기본적으로 다음과 같이 React를 각 JSX 파일로 가져와야 합니다.
import * as React from "react" ;
render ( < div / > ) ; 이는 JSX 변환이 JSX 구문을 React.createElement 에 대한 호출로 변환하지만 자체적으로 아무것도 가져오지 않기 때문에 React 변수가 자동으로 존재하지 않기 때문입니다.
Proscenium은 이러한 가져오기 명령문을 생성합니다. 이는 또한 JSX 변환 작동 방식을 완전히 변경하므로 React가 아닌 JSX 라이브러리를 사용하는 경우 코드가 손상될 수 있다는 점을 명심하세요.
[그리 멀지 않은] 미래에는 다른 JSX 라이브러리를 사용하거나 이 자동 가져오기를 완전히 비활성화하도록 Proscenium을 구성할 수 있을 것입니다.
.json 파일을 가져오면 JSON 파일이 JavaScript 개체로 구문 분석되고 해당 개체가 기본 내보내기로 내보내집니다. 이를 사용하면 다음과 같습니다.
import object from "./example.json" ;
console . log ( object ) ;기본 내보내기 외에도 JSON 개체의 각 최상위 속성에 대한 명명된 내보내기도 있습니다. 명명된 내보내기를 직접 가져오는 것은 Proscenium이 JSON 파일의 사용하지 않는 부분을 번들에서 자동으로 제거하고 실제로 사용한 명명된 내보내기만 남겨둔다는 의미입니다. 예를 들어, 다음 코드는 번들로 묶인 경우 버전 필드만 포함합니다.
import { version } from "./package.json" ;
console . log ( version ) ; Phlex는 순수 Ruby로 빠르고 재사용 가능하며 테스트 가능한 뷰를 구축하기 위한 프레임워크입니다. Proscenium은 사이드 로딩, CSS 모듈 등을 지원하여 Phlex와 완벽하게 작동합니다. Phlex 클래스를 작성하고 Proscenium::Phlex 에서 상속받기만 하면 됩니다.
class MyView < Proscenium :: Phlex
def view_template
h1 { 'Hello World' }
end
end 레이아웃에 Proscenium::Phlex::AssetInclusions 포함하고 include_assets 도우미를 호출하세요.
class ApplicationLayout < Proscenium :: Phlex
include Proscenium :: Phlex :: AssetInclusions # <--
def view_template ( & )
doctype
html do
head do
title { 'My Awesome App' }
include_assets # <--
end
body ( & )
end
end
end include_stylesheets 및 include_javascripts 도우미를 사용하여 CCS 및 JS 자산을 구체적으로 포함할 수 있으므로 HTML에 포함되는 위치를 제어할 수 있습니다.
Proscenium::Phlex 상속하는 모든 Phlex 클래스는 자동으로 사이드 로드됩니다.
CSS 모듈은 Phlex 클래스에서 완벽하게 지원되며 필요한 경우 css_module 도우미에 액세스할 수 있습니다. 그러나 Phlex 클래스에서 CSS 모듈 클래스를 참조하는 더 좋고 눈에 띄지 않는 방법이 있습니다.
Phlex 클래스 내에서 @ 로 시작하는 모든 클래스 이름은 CSS 모듈 클래스로 처리됩니다.
# /app/views/users/show_view.rb
class Users :: ShowView < Proscenium :: Phlex
def 
