웹 개발 서버를 사용하여 마이크로 라이트 응용 프로그램 구축
25365 단어 glimmerglimmerjswebdevserver
간단한 소개
이것은 일련의 블로그 글 중의 세 번째 편으로, 어떻게 유니버설 패키지를 사용하여 Glimmer.js 응용 프로그램을 구축하는지 설명한다.앞서 게시물은 Snowpack과 Rollup을 이용해 Glimmer 앱을 구축하는 방법을 소개했다.너는 이곳에서 조사할 수 있다.
눈이 쌓이다
Snowpack을 사용한 마이크로 라이트 애플리케이션 구축
라자스카 첸델란・ 11월 28일・ 6 분 읽기
#snowpack
#glimmerjs
두루마리를 쓰다
요약 기능을 사용하여 미광 응용 프로그램 구축
라자스카 첸델란・ 12월 7일・ 7분 읽기
#rollup
#glimmer
#glimmerjs
#rollupjs
이 문장에서 우리는 우리의 미광을 세울 것이다.js 응용 프로그램과 Web Dev Server이라는 구축 도구
웹 개발 서버란 무엇입니까?Web Dev Server은 로컬 브라우저 기능(예를 들어 ES modules)을 사용하여 웹 개발을 돕는다.esbuild과 Rollup에 전원이 공급됩니다.esbuild는 Go으로 작성된 매우 빠른 JavaScript 바인딩 및 미니 프로그램입니다.
나는 Modern Web Dev에서 이 도구를 발견했다. 이것은 훌륭한 프로젝트로 창작자나 Open Web Components이 개발한 것이다. 그 목적은 개발자에게 현대 네트워크 구축에 필요한 지침과 도구를 제공하는 것이다.그것들은 개발자로 하여금 복잡한 추상을 피하기 위해 브라우저와 밀접하게 협력할 수 있게 한다.
웹 Dev Server는 buildless 워크플로우에 이상적이며 가벼운 코드 변환을 위한 플러그인 아키텍처를 갖추고 있습니다.그것은 빠른 리셋의 효율적인 브라우저 캐시, 낡은 브라우저와의 호환성, 파일 변경 시 자동 리셋, 한 페이지 프로그램 (SPA) 루트의 역사적 API 리셋, 비 JS 파일의 플러그인과 중간부품 API 등 많은 기능을 가지고 있다.
프로젝트 작성
mkdir glimmer-web-dev-server
cd glimmer-web-dev-server
npm init -y
소스 파일에 src 디렉토리를 추가하는 중:
mkdir src
cd src
touch App.js App.css
응용 프로그램.js
import Component, { hbs } from '@glimmerx/component';
import logo from './logo.svg';
import styles from './App.css';
export default class App extends Component {
constructor() {
super(...arguments);
this.styles = styles;
this.logo = logo;
}
static template = hbs`
<div id="intro" class={{this.styles.intro}}>
<img src={{this.logo}}/>
<h1>Hello World, glimmerx!</h1>
<h3>
you can get started by editing <code>src/App.js</code></a>
</h3>
</div>
`;
}
CSS 모듈은 PostSS 구성 요소로 사용됩니다.우리는 잠시 후에 이 문제를 토론할 것이다.
응용 프로그램.css
.intro {
width: 34em;
}
.intro h1, .intro h3 {
font-family: Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-style: italic;
color: #FFFFFF;
margin: 0.35em;
}
.intro img {
float: left;
width: 6.5em;
margin: 0.5em 2em;
}
.intro a {
color: #FFFFFF;
}
인덱스에 demo 디렉토리를 추가하는 중입니다.html 및 주 JS 파일:
mkdir demo
cd demo
touch index.html index.js
다음에 우리는 아래 표시를 사용하여 index.html 파일을 만들고 주요 구성 요소를 DOM에 불러올 수 있도록 불러오는 지점이 필요합니다. index.js 파일을 모듈로 <script type="module">에 포함해야 합니다.
색인html
<!DOCTYPE html>
<html>
<head>
<title>GlimmerX with web-dev-server</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="./index.js"></script>
</body>
</html>
지금은 주요 지수다.js 파일은 DOM 노드 App에서 우리의 #app 구성 요소를 보여 줍니다.
색인js
import { renderComponent } from '@glimmerx/core';
import App from "../src/App.js";
renderComponent(App, document.getElementById('app'));
종속성 추가
Glimmer 구성 요소를 만들고 표시하려면 @glimmerx 라이브러리를 설치해야 합니다.
yarn add @glimmerx/component @glimmerx/core
devdependency 추가
@web/dev 서버 의존항 추가
yarn add -D @web/dev-server @web/dev-server-esbuild
@web/dev 서버 설정
이제 프로필을 만들 때가 되었습니다.웹 개발 서버에서 현재 작업 디렉토리 web-dev-server.config.*에서 구성 파일 찾기
파일 확장자는 .js, .cjs 또는 .mjs입니다..js 파일은 노드 버전 및 프로젝트의 패키지 유형에 따라 ES 모듈 또는 일반 JS 모듈로 로드됩니다.
웹 개발 Server Core 팀에서는 Node를 사용하여 구성을 작성하는 것이 좋습니다.js ES 모듈 구문을 사용하고 .mjs 파일 확장자를 사용하여 구성이 항상 올바르게 로드되도록 합니다.
touch web-dev-server.config.mjs
네트워크 개발 서버.배치하다.mjs
import { esbuildPlugin } from "@web/dev-server-esbuild";
export default {
nodeResolve: true,
plugins: [],
};
우리는 점차적으로 배치를 구축하기 시작할 것이다.우선, 구성 요소 원본 파일에서 JS를 컴파일해야 합니다.또한 Rollup과 Babel을 사용할 예정입니다.롤러와 바벨 플러그인에 필요한 패키지를 설치합니다.
바벨을 위해
yarn add -D @babel/plugin-proposal-class-properties @babel/plugin-proposal-decorators @babel/preset-env
내장 손잡이 문법으로 Glimmer 구성 요소를 컴파일하기 위해서 @glimmerx/babel-plugin-component-templates을 설치해야 합니다. here에서 더 많은 것을 알 수 있습니다.
yarn add -D @glimmerx/babel-plugin-component-templates
웹 개발 서버에서 using rollup plugins용 어댑터가 필요합니다.웹 개발 서버 플러그인과 플러그인은 매우 비슷한 API를 공유하기 때문에 웹 개발 서버에서 어댑터를 통해 플러그인을 다시 사용하는 것이 가능하다.
우리가 필요로 하는 총결산
yarn add -D @web/dev-server-rollup @rollup/plugin-babel
babel 플러그인을 설정 파일에 추가합니다.
import { esbuildPlugin } from "@web/dev-server-esbuild";
import { fromRollup } from '@web/dev-server-rollup';
import * as babelModule from '@rollup/plugin-babel';
const { babel } = babelModule;
const babelPlugin = fromRollup(babel);
export default {
nodeResolve: true,
plugins: [
babelPlugin({
babelHelpers: 'bundled',
plugins: [
'@glimmerx/babel-plugin-component-templates',
['@babel/plugin-proposal-decorators', { legacy: true }],
'@babel/plugin-proposal-class-properties',
],
}),
],
};
우리는 설정 파일에서 바벨 플러그인과 fromRollup 함수를 가져오고 있습니다.그리고 우리는 어댑터 함수로 플러그인을 포장해서 작동시켰다.
이제 가방에 스크립트를 추가할 때가 되었습니다.json은 우리의 개발 서버를 시작하고 원본 파일을 구축합니다.
"start": "web-dev-server --open demo/ --node-resolve --watch"
웹 개발 서버에 demo 폴더의 파일 변경 사항을 열고 보고 --node-resolve 로고를 사용하여 브라우저에서 사용하는 누드 모듈 가져오는 것을 설명하는 것입니다.
이제 다음 명령을 실행하여 웹 dev 서버를 시작하여 브라우저에 응용 프로그램을 로드할 수 있습니다.
yarn start
브라우저에서 URL http://localhost:8000/demo으로 이동하면, 컨트롤러에서 공백 페이지와 오류를 볼 수 있습니다.왜냐하면 우리는 CSS와 이미지를 처리하기 위해 웹 개발 서버를 설정하지 않았기 때문이다. 왜냐하면 구축 과정은 가져온 모든 파일을 JS로 컴파일하고 웹 개발 서버는 브라우저에 다양한 유형의 파일을 제공하기 때문이다.비표준 파일 형식을 .css 또는 .svg 파일로 변환하려면 서버에 이를 JS 파일로 처리하도록 지시해야 합니다.
이제 통합 플러그인 rollup-plugin-postcss과 @rollup/plugin-image을 사용하여 그것들을 처리합시다.
yarn add -D @rollup/plugin-image rollup-plugin-postcss
이렇게 하면 앞서 설명한 POSTSS CSS Modules 기능을 사용할 수 있습니다.이렇게 하면 스타일 충돌과 css 클래스와 선택기를 걱정할 필요가 없습니다. 모든 클래스와 선택기는 범위와 봉인을 적절하게 제한할 수 있기 때문입니다.다음과 같이 어셈블리에서 스타일 정의를 가져오고 사용할 수 있습니다.
import styles from './App.css';
...
<div class={{styles.intro}}/>
현재, 이 플러그인을 추가하여 css와 그림을 설정에 불러옵니다.
...
import postcss from 'rollup-plugin-postcss';
import image from '@rollup/plugin-image';
...
const postcssPlugin = fromRollup(postcss);
const imagePlugin = fromRollup(image);
export default {
...
plugins: [
...
postcssPlugin({
include: ['src/**/*.css'],
modules: true
}),
imagePlugin()
],
mimeTypes: {
'**/*.css': 'js',
'**/*.svg': 'js'
}
};
위의 설정에서, 우리는 rollup-plugin-postcss에게 src 폴더에 모든 css 파일을 포함하고, 모듈 옵션으로true로 설정된 css 모듈을 알려 줍니다.
웹 개발 서버에 css 옵션을 사용하여 모든 svg과 mimeTypes 파일을 JS로 불러올 것을 알려야 합니다.
다음은 저희 웹 개발 서버의 완전함과 최종 설정입니다.
import { esbuildPlugin } from "@web/dev-server-esbuild";
import { fromRollup } from '@web/dev-server-rollup';
import * as babelModule from '@rollup/plugin-babel';
import postcss from 'rollup-plugin-postcss';
import image from '@rollup/plugin-image';
const { babel } = babelModule;
const babelPlugin = fromRollup(babel);
const postcssPlugin = fromRollup(postcss);
const imagePlugin = fromRollup(image);
export default {
nodeResolve: true,
plugins: [
babelPlugin({
babelHelpers: 'bundled',
plugins: [
'@glimmerx/babel-plugin-component-templates',
['@babel/plugin-proposal-decorators', { legacy: true }],
'@babel/plugin-proposal-class-properties',
],
}),
postcssPlugin({
include: ['src/**/*.css'],
modules: true
}),
imagePlugin()
],
mimeTypes: {
'**/*.css': 'js',
'**/*.svg': 'js'
}
};
서버를 다시 시작하고 브라우저에서 http://localhost:8000/demo URL을 방문하십시오.너의 응용 프로그램은 반드시 이렇게 해야 한다.
소스 코드
본고의 원본 코드는 Github 저장소에서 찾을 수 있다.이 저장소에는 Glimmer 구성 요소에 대한 테스트를 작성하고 Web Test Runner으로 테스트를 실행할 수 있는 추가 도구가 포함되어 있습니다. 이것은 현대 웹 프로젝트의 또 다른 좋은 도구입니다.
이렇게 하면 Building Glimmer 애플리케이션 제품군과 다른 번들이 끝납니다.질문이나 피드백이 있으면 기꺼이 답변해 드리겠습니다.
Reference
이 문제에 관하여(웹 개발 서버를 사용하여 마이크로 라이트 응용 프로그램 구축), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/rajasegar/building-glimmer-apps-with-web-dev-server-mlk
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Snowpack을 사용한 마이크로 라이트 애플리케이션 구축
라자스카 첸델란・ 11월 28일・ 6 분 읽기
#snowpack
#glimmerjs
요약 기능을 사용하여 미광 응용 프로그램 구축
라자스카 첸델란・ 12월 7일・ 7분 읽기
#rollup
#glimmer
#glimmerjs
#rollupjs
Web Dev Server은 로컬 브라우저 기능(예를 들어 ES modules)을 사용하여 웹 개발을 돕는다.esbuild과 Rollup에 전원이 공급됩니다.esbuild는 Go으로 작성된 매우 빠른 JavaScript 바인딩 및 미니 프로그램입니다.나는 Modern Web Dev에서 이 도구를 발견했다. 이것은 훌륭한 프로젝트로 창작자나 Open Web Components이 개발한 것이다. 그 목적은 개발자에게 현대 네트워크 구축에 필요한 지침과 도구를 제공하는 것이다.그것들은 개발자로 하여금 복잡한 추상을 피하기 위해 브라우저와 밀접하게 협력할 수 있게 한다.
웹 Dev Server는 buildless 워크플로우에 이상적이며 가벼운 코드 변환을 위한 플러그인 아키텍처를 갖추고 있습니다.그것은 빠른 리셋의 효율적인 브라우저 캐시, 낡은 브라우저와의 호환성, 파일 변경 시 자동 리셋, 한 페이지 프로그램 (SPA) 루트의 역사적 API 리셋, 비 JS 파일의 플러그인과 중간부품 API 등 많은 기능을 가지고 있다.
프로젝트 작성
mkdir glimmer-web-dev-server
cd glimmer-web-dev-server
npm init -y
소스 파일에 src 디렉토리를 추가하는 중:
mkdir src
cd src
touch App.js App.css
응용 프로그램.js
import Component, { hbs } from '@glimmerx/component';
import logo from './logo.svg';
import styles from './App.css';
export default class App extends Component {
constructor() {
super(...arguments);
this.styles = styles;
this.logo = logo;
}
static template = hbs`
<div id="intro" class={{this.styles.intro}}>
<img src={{this.logo}}/>
<h1>Hello World, glimmerx!</h1>
<h3>
you can get started by editing <code>src/App.js</code></a>
</h3>
</div>
`;
}
CSS 모듈은 PostSS 구성 요소로 사용됩니다.우리는 잠시 후에 이 문제를 토론할 것이다.
응용 프로그램.css
.intro {
width: 34em;
}
.intro h1, .intro h3 {
font-family: Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-style: italic;
color: #FFFFFF;
margin: 0.35em;
}
.intro img {
float: left;
width: 6.5em;
margin: 0.5em 2em;
}
.intro a {
color: #FFFFFF;
}
인덱스에 demo 디렉토리를 추가하는 중입니다.html 및 주 JS 파일:
mkdir demo
cd demo
touch index.html index.js
다음에 우리는 아래 표시를 사용하여 index.html 파일을 만들고 주요 구성 요소를 DOM에 불러올 수 있도록 불러오는 지점이 필요합니다. index.js 파일을 모듈로 <script type="module">에 포함해야 합니다.
색인html
<!DOCTYPE html>
<html>
<head>
<title>GlimmerX with web-dev-server</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="./index.js"></script>
</body>
</html>
지금은 주요 지수다.js 파일은 DOM 노드 App에서 우리의 #app 구성 요소를 보여 줍니다.
색인js
import { renderComponent } from '@glimmerx/core';
import App from "../src/App.js";
renderComponent(App, document.getElementById('app'));
종속성 추가
Glimmer 구성 요소를 만들고 표시하려면 @glimmerx 라이브러리를 설치해야 합니다.
yarn add @glimmerx/component @glimmerx/core
devdependency 추가
@web/dev 서버 의존항 추가
yarn add -D @web/dev-server @web/dev-server-esbuild
@web/dev 서버 설정
이제 프로필을 만들 때가 되었습니다.웹 개발 서버에서 현재 작업 디렉토리 web-dev-server.config.*에서 구성 파일 찾기
파일 확장자는 .js, .cjs 또는 .mjs입니다..js 파일은 노드 버전 및 프로젝트의 패키지 유형에 따라 ES 모듈 또는 일반 JS 모듈로 로드됩니다.
웹 개발 Server Core 팀에서는 Node를 사용하여 구성을 작성하는 것이 좋습니다.js ES 모듈 구문을 사용하고 .mjs 파일 확장자를 사용하여 구성이 항상 올바르게 로드되도록 합니다.
touch web-dev-server.config.mjs
네트워크 개발 서버.배치하다.mjs
import { esbuildPlugin } from "@web/dev-server-esbuild";
export default {
nodeResolve: true,
plugins: [],
};
우리는 점차적으로 배치를 구축하기 시작할 것이다.우선, 구성 요소 원본 파일에서 JS를 컴파일해야 합니다.또한 Rollup과 Babel을 사용할 예정입니다.롤러와 바벨 플러그인에 필요한 패키지를 설치합니다.
바벨을 위해
yarn add -D @babel/plugin-proposal-class-properties @babel/plugin-proposal-decorators @babel/preset-env
내장 손잡이 문법으로 Glimmer 구성 요소를 컴파일하기 위해서 @glimmerx/babel-plugin-component-templates을 설치해야 합니다. here에서 더 많은 것을 알 수 있습니다.
yarn add -D @glimmerx/babel-plugin-component-templates
웹 개발 서버에서 using rollup plugins용 어댑터가 필요합니다.웹 개발 서버 플러그인과 플러그인은 매우 비슷한 API를 공유하기 때문에 웹 개발 서버에서 어댑터를 통해 플러그인을 다시 사용하는 것이 가능하다.
우리가 필요로 하는 총결산
yarn add -D @web/dev-server-rollup @rollup/plugin-babel
babel 플러그인을 설정 파일에 추가합니다.
import { esbuildPlugin } from "@web/dev-server-esbuild";
import { fromRollup } from '@web/dev-server-rollup';
import * as babelModule from '@rollup/plugin-babel';
const { babel } = babelModule;
const babelPlugin = fromRollup(babel);
export default {
nodeResolve: true,
plugins: [
babelPlugin({
babelHelpers: 'bundled',
plugins: [
'@glimmerx/babel-plugin-component-templates',
['@babel/plugin-proposal-decorators', { legacy: true }],
'@babel/plugin-proposal-class-properties',
],
}),
],
};
우리는 설정 파일에서 바벨 플러그인과 fromRollup 함수를 가져오고 있습니다.그리고 우리는 어댑터 함수로 플러그인을 포장해서 작동시켰다.
이제 가방에 스크립트를 추가할 때가 되었습니다.json은 우리의 개발 서버를 시작하고 원본 파일을 구축합니다.
"start": "web-dev-server --open demo/ --node-resolve --watch"
웹 개발 서버에 demo 폴더의 파일 변경 사항을 열고 보고 --node-resolve 로고를 사용하여 브라우저에서 사용하는 누드 모듈 가져오는 것을 설명하는 것입니다.
이제 다음 명령을 실행하여 웹 dev 서버를 시작하여 브라우저에 응용 프로그램을 로드할 수 있습니다.
yarn start
브라우저에서 URL http://localhost:8000/demo으로 이동하면, 컨트롤러에서 공백 페이지와 오류를 볼 수 있습니다.왜냐하면 우리는 CSS와 이미지를 처리하기 위해 웹 개발 서버를 설정하지 않았기 때문이다. 왜냐하면 구축 과정은 가져온 모든 파일을 JS로 컴파일하고 웹 개발 서버는 브라우저에 다양한 유형의 파일을 제공하기 때문이다.비표준 파일 형식을 .css 또는 .svg 파일로 변환하려면 서버에 이를 JS 파일로 처리하도록 지시해야 합니다.
이제 통합 플러그인 rollup-plugin-postcss과 @rollup/plugin-image을 사용하여 그것들을 처리합시다.
yarn add -D @rollup/plugin-image rollup-plugin-postcss
이렇게 하면 앞서 설명한 POSTSS CSS Modules 기능을 사용할 수 있습니다.이렇게 하면 스타일 충돌과 css 클래스와 선택기를 걱정할 필요가 없습니다. 모든 클래스와 선택기는 범위와 봉인을 적절하게 제한할 수 있기 때문입니다.다음과 같이 어셈블리에서 스타일 정의를 가져오고 사용할 수 있습니다.
import styles from './App.css';
...
<div class={{styles.intro}}/>
현재, 이 플러그인을 추가하여 css와 그림을 설정에 불러옵니다.
...
import postcss from 'rollup-plugin-postcss';
import image from '@rollup/plugin-image';
...
const postcssPlugin = fromRollup(postcss);
const imagePlugin = fromRollup(image);
export default {
...
plugins: [
...
postcssPlugin({
include: ['src/**/*.css'],
modules: true
}),
imagePlugin()
],
mimeTypes: {
'**/*.css': 'js',
'**/*.svg': 'js'
}
};
위의 설정에서, 우리는 rollup-plugin-postcss에게 src 폴더에 모든 css 파일을 포함하고, 모듈 옵션으로true로 설정된 css 모듈을 알려 줍니다.
웹 개발 서버에 css 옵션을 사용하여 모든 svg과 mimeTypes 파일을 JS로 불러올 것을 알려야 합니다.
다음은 저희 웹 개발 서버의 완전함과 최종 설정입니다.
import { esbuildPlugin } from "@web/dev-server-esbuild";
import { fromRollup } from '@web/dev-server-rollup';
import * as babelModule from '@rollup/plugin-babel';
import postcss from 'rollup-plugin-postcss';
import image from '@rollup/plugin-image';
const { babel } = babelModule;
const babelPlugin = fromRollup(babel);
const postcssPlugin = fromRollup(postcss);
const imagePlugin = fromRollup(image);
export default {
nodeResolve: true,
plugins: [
babelPlugin({
babelHelpers: 'bundled',
plugins: [
'@glimmerx/babel-plugin-component-templates',
['@babel/plugin-proposal-decorators', { legacy: true }],
'@babel/plugin-proposal-class-properties',
],
}),
postcssPlugin({
include: ['src/**/*.css'],
modules: true
}),
imagePlugin()
],
mimeTypes: {
'**/*.css': 'js',
'**/*.svg': 'js'
}
};
서버를 다시 시작하고 브라우저에서 http://localhost:8000/demo URL을 방문하십시오.너의 응용 프로그램은 반드시 이렇게 해야 한다.
소스 코드
본고의 원본 코드는 Github 저장소에서 찾을 수 있다.이 저장소에는 Glimmer 구성 요소에 대한 테스트를 작성하고 Web Test Runner으로 테스트를 실행할 수 있는 추가 도구가 포함되어 있습니다. 이것은 현대 웹 프로젝트의 또 다른 좋은 도구입니다.
이렇게 하면 Building Glimmer 애플리케이션 제품군과 다른 번들이 끝납니다.질문이나 피드백이 있으면 기꺼이 답변해 드리겠습니다.
Reference
이 문제에 관하여(웹 개발 서버를 사용하여 마이크로 라이트 응용 프로그램 구축), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/rajasegar/building-glimmer-apps-with-web-dev-server-mlk
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
mkdir glimmer-web-dev-server
cd glimmer-web-dev-server
npm init -y
mkdir src
cd src
touch App.js App.css
import Component, { hbs } from '@glimmerx/component';
import logo from './logo.svg';
import styles from './App.css';
export default class App extends Component {
constructor() {
super(...arguments);
this.styles = styles;
this.logo = logo;
}
static template = hbs`
<div id="intro" class={{this.styles.intro}}>
<img src={{this.logo}}/>
<h1>Hello World, glimmerx!</h1>
<h3>
you can get started by editing <code>src/App.js</code></a>
</h3>
</div>
`;
}
.intro {
width: 34em;
}
.intro h1, .intro h3 {
font-family: Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-style: italic;
color: #FFFFFF;
margin: 0.35em;
}
.intro img {
float: left;
width: 6.5em;
margin: 0.5em 2em;
}
.intro a {
color: #FFFFFF;
}
mkdir demo
cd demo
touch index.html index.js
<!DOCTYPE html>
<html>
<head>
<title>GlimmerX with web-dev-server</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="./index.js"></script>
</body>
</html>
import { renderComponent } from '@glimmerx/core';
import App from "../src/App.js";
renderComponent(App, document.getElementById('app'));
Glimmer 구성 요소를 만들고 표시하려면
@glimmerx 라이브러리를 설치해야 합니다.yarn add @glimmerx/component @glimmerx/core
devdependency 추가
@web/dev 서버 의존항 추가
yarn add -D @web/dev-server @web/dev-server-esbuild
@web/dev 서버 설정
이제 프로필을 만들 때가 되었습니다.웹 개발 서버에서 현재 작업 디렉토리 web-dev-server.config.*에서 구성 파일 찾기
파일 확장자는 .js, .cjs 또는 .mjs입니다..js 파일은 노드 버전 및 프로젝트의 패키지 유형에 따라 ES 모듈 또는 일반 JS 모듈로 로드됩니다.
웹 개발 Server Core 팀에서는 Node를 사용하여 구성을 작성하는 것이 좋습니다.js ES 모듈 구문을 사용하고 .mjs 파일 확장자를 사용하여 구성이 항상 올바르게 로드되도록 합니다.
touch web-dev-server.config.mjs
네트워크 개발 서버.배치하다.mjs
import { esbuildPlugin } from "@web/dev-server-esbuild";
export default {
nodeResolve: true,
plugins: [],
};
우리는 점차적으로 배치를 구축하기 시작할 것이다.우선, 구성 요소 원본 파일에서 JS를 컴파일해야 합니다.또한 Rollup과 Babel을 사용할 예정입니다.롤러와 바벨 플러그인에 필요한 패키지를 설치합니다.
바벨을 위해
yarn add -D @babel/plugin-proposal-class-properties @babel/plugin-proposal-decorators @babel/preset-env
내장 손잡이 문법으로 Glimmer 구성 요소를 컴파일하기 위해서 @glimmerx/babel-plugin-component-templates을 설치해야 합니다. here에서 더 많은 것을 알 수 있습니다.
yarn add -D @glimmerx/babel-plugin-component-templates
웹 개발 서버에서 using rollup plugins용 어댑터가 필요합니다.웹 개발 서버 플러그인과 플러그인은 매우 비슷한 API를 공유하기 때문에 웹 개발 서버에서 어댑터를 통해 플러그인을 다시 사용하는 것이 가능하다.
우리가 필요로 하는 총결산
yarn add -D @web/dev-server-rollup @rollup/plugin-babel
babel 플러그인을 설정 파일에 추가합니다.
import { esbuildPlugin } from "@web/dev-server-esbuild";
import { fromRollup } from '@web/dev-server-rollup';
import * as babelModule from '@rollup/plugin-babel';
const { babel } = babelModule;
const babelPlugin = fromRollup(babel);
export default {
nodeResolve: true,
plugins: [
babelPlugin({
babelHelpers: 'bundled',
plugins: [
'@glimmerx/babel-plugin-component-templates',
['@babel/plugin-proposal-decorators', { legacy: true }],
'@babel/plugin-proposal-class-properties',
],
}),
],
};
우리는 설정 파일에서 바벨 플러그인과 fromRollup 함수를 가져오고 있습니다.그리고 우리는 어댑터 함수로 플러그인을 포장해서 작동시켰다.
이제 가방에 스크립트를 추가할 때가 되었습니다.json은 우리의 개발 서버를 시작하고 원본 파일을 구축합니다.
"start": "web-dev-server --open demo/ --node-resolve --watch"
웹 개발 서버에 demo 폴더의 파일 변경 사항을 열고 보고 --node-resolve 로고를 사용하여 브라우저에서 사용하는 누드 모듈 가져오는 것을 설명하는 것입니다.
이제 다음 명령을 실행하여 웹 dev 서버를 시작하여 브라우저에 응용 프로그램을 로드할 수 있습니다.
yarn start
브라우저에서 URL http://localhost:8000/demo으로 이동하면, 컨트롤러에서 공백 페이지와 오류를 볼 수 있습니다.왜냐하면 우리는 CSS와 이미지를 처리하기 위해 웹 개발 서버를 설정하지 않았기 때문이다. 왜냐하면 구축 과정은 가져온 모든 파일을 JS로 컴파일하고 웹 개발 서버는 브라우저에 다양한 유형의 파일을 제공하기 때문이다.비표준 파일 형식을 .css 또는 .svg 파일로 변환하려면 서버에 이를 JS 파일로 처리하도록 지시해야 합니다.
이제 통합 플러그인 rollup-plugin-postcss과 @rollup/plugin-image을 사용하여 그것들을 처리합시다.
yarn add -D @rollup/plugin-image rollup-plugin-postcss
이렇게 하면 앞서 설명한 POSTSS CSS Modules 기능을 사용할 수 있습니다.이렇게 하면 스타일 충돌과 css 클래스와 선택기를 걱정할 필요가 없습니다. 모든 클래스와 선택기는 범위와 봉인을 적절하게 제한할 수 있기 때문입니다.다음과 같이 어셈블리에서 스타일 정의를 가져오고 사용할 수 있습니다.
import styles from './App.css';
...
<div class={{styles.intro}}/>
현재, 이 플러그인을 추가하여 css와 그림을 설정에 불러옵니다.
...
import postcss from 'rollup-plugin-postcss';
import image from '@rollup/plugin-image';
...
const postcssPlugin = fromRollup(postcss);
const imagePlugin = fromRollup(image);
export default {
...
plugins: [
...
postcssPlugin({
include: ['src/**/*.css'],
modules: true
}),
imagePlugin()
],
mimeTypes: {
'**/*.css': 'js',
'**/*.svg': 'js'
}
};
위의 설정에서, 우리는 rollup-plugin-postcss에게 src 폴더에 모든 css 파일을 포함하고, 모듈 옵션으로true로 설정된 css 모듈을 알려 줍니다.
웹 개발 서버에 css 옵션을 사용하여 모든 svg과 mimeTypes 파일을 JS로 불러올 것을 알려야 합니다.
다음은 저희 웹 개발 서버의 완전함과 최종 설정입니다.
import { esbuildPlugin } from "@web/dev-server-esbuild";
import { fromRollup } from '@web/dev-server-rollup';
import * as babelModule from '@rollup/plugin-babel';
import postcss from 'rollup-plugin-postcss';
import image from '@rollup/plugin-image';
const { babel } = babelModule;
const babelPlugin = fromRollup(babel);
const postcssPlugin = fromRollup(postcss);
const imagePlugin = fromRollup(image);
export default {
nodeResolve: true,
plugins: [
babelPlugin({
babelHelpers: 'bundled',
plugins: [
'@glimmerx/babel-plugin-component-templates',
['@babel/plugin-proposal-decorators', { legacy: true }],
'@babel/plugin-proposal-class-properties',
],
}),
postcssPlugin({
include: ['src/**/*.css'],
modules: true
}),
imagePlugin()
],
mimeTypes: {
'**/*.css': 'js',
'**/*.svg': 'js'
}
};
서버를 다시 시작하고 브라우저에서 http://localhost:8000/demo URL을 방문하십시오.너의 응용 프로그램은 반드시 이렇게 해야 한다.
소스 코드
본고의 원본 코드는 Github 저장소에서 찾을 수 있다.이 저장소에는 Glimmer 구성 요소에 대한 테스트를 작성하고 Web Test Runner으로 테스트를 실행할 수 있는 추가 도구가 포함되어 있습니다. 이것은 현대 웹 프로젝트의 또 다른 좋은 도구입니다.
이렇게 하면 Building Glimmer 애플리케이션 제품군과 다른 번들이 끝납니다.질문이나 피드백이 있으면 기꺼이 답변해 드리겠습니다.
Reference
이 문제에 관하여(웹 개발 서버를 사용하여 마이크로 라이트 응용 프로그램 구축), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/rajasegar/building-glimmer-apps-with-web-dev-server-mlk
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
yarn add -D @web/dev-server @web/dev-server-esbuild
touch web-dev-server.config.mjs
import { esbuildPlugin } from "@web/dev-server-esbuild";
export default {
nodeResolve: true,
plugins: [],
};
yarn add -D @babel/plugin-proposal-class-properties @babel/plugin-proposal-decorators @babel/preset-env
yarn add -D @glimmerx/babel-plugin-component-templates
yarn add -D @web/dev-server-rollup @rollup/plugin-babel
import { esbuildPlugin } from "@web/dev-server-esbuild";
import { fromRollup } from '@web/dev-server-rollup';
import * as babelModule from '@rollup/plugin-babel';
const { babel } = babelModule;
const babelPlugin = fromRollup(babel);
export default {
nodeResolve: true,
plugins: [
babelPlugin({
babelHelpers: 'bundled',
plugins: [
'@glimmerx/babel-plugin-component-templates',
['@babel/plugin-proposal-decorators', { legacy: true }],
'@babel/plugin-proposal-class-properties',
],
}),
],
};
"start": "web-dev-server --open demo/ --node-resolve --watch"
yarn start
yarn add -D @rollup/plugin-image rollup-plugin-postcss
import styles from './App.css';
...
<div class={{styles.intro}}/>
...
import postcss from 'rollup-plugin-postcss';
import image from '@rollup/plugin-image';
...
const postcssPlugin = fromRollup(postcss);
const imagePlugin = fromRollup(image);
export default {
...
plugins: [
...
postcssPlugin({
include: ['src/**/*.css'],
modules: true
}),
imagePlugin()
],
mimeTypes: {
'**/*.css': 'js',
'**/*.svg': 'js'
}
};
import { esbuildPlugin } from "@web/dev-server-esbuild";
import { fromRollup } from '@web/dev-server-rollup';
import * as babelModule from '@rollup/plugin-babel';
import postcss from 'rollup-plugin-postcss';
import image from '@rollup/plugin-image';
const { babel } = babelModule;
const babelPlugin = fromRollup(babel);
const postcssPlugin = fromRollup(postcss);
const imagePlugin = fromRollup(image);
export default {
nodeResolve: true,
plugins: [
babelPlugin({
babelHelpers: 'bundled',
plugins: [
'@glimmerx/babel-plugin-component-templates',
['@babel/plugin-proposal-decorators', { legacy: true }],
'@babel/plugin-proposal-class-properties',
],
}),
postcssPlugin({
include: ['src/**/*.css'],
modules: true
}),
imagePlugin()
],
mimeTypes: {
'**/*.css': 'js',
'**/*.svg': 'js'
}
};
본고의 원본 코드는 Github 저장소에서 찾을 수 있다.이 저장소에는 Glimmer 구성 요소에 대한 테스트를 작성하고 Web Test Runner으로 테스트를 실행할 수 있는 추가 도구가 포함되어 있습니다. 이것은 현대 웹 프로젝트의 또 다른 좋은 도구입니다.
이렇게 하면 Building Glimmer 애플리케이션 제품군과 다른 번들이 끝납니다.질문이나 피드백이 있으면 기꺼이 답변해 드리겠습니다.
Reference
이 문제에 관하여(웹 개발 서버를 사용하여 마이크로 라이트 응용 프로그램 구축), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/rajasegar/building-glimmer-apps-with-web-dev-server-mlk텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
