경고
불행히도 preact-cli 더 이상 적극적인 발전을 보지 않습니다! 기존의 모든 앱에 의존 할 수 있도록 안정적이지만 새 앱을 만들려면 create-preact 통해 Vite를 권장합니다. 동일한 기능을 많이 제공하지만 훨씬 빠르고 현대적인 경험입니다. 수년 동안 모든 기고자와 사용자에게 감사합니다!
몇 초 안에 Preact Progressive Web 앱을 구축하기 시작하십시오
async! 접두사중요 : node.js> = v14.14가 필요합니다.
$ npm init preact-cli < template-name > < project-name >
$ yarn create preact-cli < template-name > < project-name >예:
$ npm init preact-cli default my-project 위의 명령은 preactjs-templates/default에서 템플릿을 가져 와서 ./my-project/ 에서 프로젝트를 생성합니다.
공식 PREACT 프로젝트 템플릿의 목적은 사용자가 가능한 빨리 실제 앱 코드를 시작할 수 있도록 의견이 많은 개발 도구 설정을 제공하는 것입니다. 그러나이 템플릿은 앱 코드를 구조화하는 방법과 PreAct.js 외에 사용하는 라이브러리에 대해 활용되지 않습니다.
모든 공식 프로젝트 템플릿은 PreactJS-Templates 조직의 저장소입니다. 새 템플릿이 조직에 추가되면 해당 템플릿을 사용하기 위해 npm init preact-cli <template-name> <project-name> 실행할 수 있습니다.
현재 사용 가능한 템플릿에는 다음이 포함됩니다.
기본 - 모든 기능이 포함 된 기본 템플릿
단순 - 단일 파일에서 가장 간단한 가능한 preact 설정
netlify- preact를 사용한 Netlify CMS 템플릿
TypeScript- 타임 스크립트에서 구현 된 기본 템플릿
위젯 - 위젯이 다른 웹 사이트에 포함될 템플릿
위젯 유형 스크립트 - TypeScript에서 구현 된 위젯 템플릿
? 팁 :
'template'폴더가 장착 된 모든 Github Repo는 사용자 정의 템플릿으로 사용할 수 있습니다.
npm init preact-cli <username>/<repository> <project-name>
모든 공식 preactjs-cli 저장소를 나열합니다
$ [npm init / yarn create] preact-cli list빠른 시작 개발을위한 프로젝트를 만듭니다.
$ [npm init / yarn create] preact-cli <template-name> <project-name>
--name The application name.
--cwd A directory to use instead of $PWD.
--force Force option to create the directory for the new app [boolean] [default: false]
--git Initialize version control using git. [boolean] [default: false]
--install Installs dependencies. [boolean] [default: true]
생산 빌드를 만듭니다
default: true 플래그는 --no-<option> 로 접두사; 예를 들어, --no-sw 및 --no-prerender .
$ [npm run / yarn] preact build
--src Specify source directory (default src)
--dest Specify output directory (default build)
--cwd A directory to use instead of $PWD (default .)
--sw Generate and attach a Service Worker (default true)
--babelConfig Path to custom Babel config (default .babelrc)
--prerender Renders route(s) into generated static HTML (default true)
--prerenderUrls Path to pre-rendered routes config (default prerender-urls.json)
--template Path to custom EJS or HTML template (default 'src/template.ejs')
--analyze Launch interactive Analyzer to inspect production bundle(s) (default false)
-c, --config Path to custom CLI config (default preact.config.js)
-v, --verbose Verbose output
-h, --help Displays this message
hot-module-replacement , module-watcher 와 같은 여러 기능으로 개발 서버를 스핀 업
$ [npm run / yarn] preact watch
--src Specify source directory (default src)
--cwd A directory to use instead of $PWD (default .)
--clear Clear the console (default true)
--sw Generate and attach a Service Worker (default false)
--babelConfig Path to custom Babel config (default .babelrc)
--https Run server with HTTPS protocol
--key Path to PEM key for custom SSL certificate
--cert Path to custom SSL certificate
--cacert Path to optional CA certificate override
--prerender Pre-render static content on first run
--prerenderUrls Path to pre-rendered routes config (default prerender-urls.json)
--template Path to custom EJS or HTML template (default 'src/template.ejs')
--refresh Enables experimental preact-refresh functionality
-c, --config Path to custom CLI config (default preact.config.js)
-H, --host Set server hostname (default 0.0.0.0)
-p, --port Set server port (default 8080)
-h, --help Displays this message
메모:
HTTPS 사용하여 Dev 서버를 실행할 수 있으면 다음 HTTPS=true preact watch 사용할 수 있습니다.PORT=8091 preact watch 사용하여 다른 포트에서 개발자 서버를 실행할 수 있습니다. 현지 환경에 관한 정보 디버깅 정보.
$ [npm run / yarn] preact info PRACT CLI PRPL 패턴을 따라 초기 경로 ( / )를 생성 된 static index.html 로 렌더링하기 위해서는 사용자가 JavaScript가 실행되기 전에 페이지를 볼 수 있도록하여 사용자에게 느린 장치 또는 웹 사이트의 콘텐츠가 훨씬 빠르게 제공되도록합니다.
PreAct CLI는 노드 내부의 앱을 렌더링하여이를 수행합니다. 이는 서버 측 렌더링 시나리오에서 어떻게되는지 유사하게 브라우저에서 사용 가능한 DOM 또는 다른 글로벌 변수에 액세스 할 수 없음을 의미합니다. 브라우저 API에 의존 해야하는 경우 다음을 수행 할 수 있습니다.
--no-prerender 깃발을 전달하여 preact build 으로 떨어 뜨려if (typeof window !== "undefined") { ... } 또는 Window 또는 Global과 같은 도우미 라이브러리를 사용할 수 있습니다.구성 사용자 정의를보다 쉽게 만들려면 PreAct-Cli가 플러그인을 지원합니다. 사용 방법에 대한 튜토리얼을 보려면 플러그인 위키를 방문하십시오.
package.json 내에서 "browserslist" 키를 선언하여 지원되는 브라우저 버전 목록을 사용자 정의 할 수 있습니다. 이 값을 변경하면 레거시 JavaScript ( @babel/preset-env )와 CSS ( autoprefixer 를 통해) 출력이 수정됩니다.
기본적으로 preact-cli 다음 구성을 에뮬레이션합니다.
package.json
{
"browserslist" : [ " > 0.5% " , " last 2 versions " , " Firefox ESR " , " not dead " ]
}Babel을 사용자 정의하려면 두 가지 옵션이 있습니다.
프로젝트의 루트 디렉토리에 .babelrc 파일을 만들거나 --babelConfig 경로를 사용하여 유효한 바벨 구성 파일을 가리킬 수 있습니다. 여기에서 정의하는 모든 설정은 Preact CLI Preset에 병합됩니다. 예를 들어, 이미 사용중인 다른 플러그인과 다른 플러그인이 포함 된 "plugins" 객체를 전달하는 경우 기존 구성 위에 단순히 추가됩니다. 충돌이 있으면 기본값이 우선하므로 옵션 2를 살펴보고 싶을 것입니다.
기존 바벨 구성을 수정하려면 preact.config.js 파일을 사용해야합니다. 자세한 내용은 웹 팩 섹션을 방문하거나 Customize Babel 예제를 확인하십시오!
preact-cli의 Webpack config를 사용자 정의하려면 preact.config.js 또는 preact.config.json 파일을 작성하십시오.
preact.config.js
// ... imports or other code up here ...
/**
* Function that mutates the original webpack config.
* Supports asynchronous changes when a promise is returned (or it's an async function).
*
* @param {import('preact-cli').Config} config - original webpack config
* @param {import('preact-cli').Env} env - current environment and options pass to the CLI
* @param {import('preact-cli').Helpers} helpers - object with useful helpers for working with the webpack config
* @param {Record<string, unknown>} options - this is mainly relevant for plugins (will always be empty in the config), default to an empty object
*/
export default ( config , env , helpers , options ) => {
/** you can change the config here **/
} ; 구성의 다양한 부분을 찾는 방법이 포함 된 helpers 인수에 대한 자세한 내용은 Webpack Config Helpers Wiki를 참조하십시오. 또한 웹 팩 구성을 변경하는 방법에 대한 예제를 포함하는 레시피 위키를 참조하십시오.
--prerender 플래그는 기본적으로 응용 프로그램의 루트 만 기본적으로 프레 렌더입니다. Prerender 다른 경로를 원한다면 렌더링하려는 경로 세트가 포함 된 prerender-urls.json 파일을 만들 수 있습니다. 경로를 정의하는 데 필요한 형식은 url 키와 선택적 title 키가있는 객체 배열입니다.
prerender-urls.json
[
{
"url" : " / " ,
"title" : " Homepage "
},
{
"url" : " /route/random "
}
] 플래그 --prerenderUrls 사용하여 prerender-urls.json 의 경로 및/또는 이름을 사용자 정의 할 수 있습니다.
preact build --prerenderUrls src/prerender-urls.json정적 JSON 파일이 너무 제한적이면 대신 경로를 내보내는 JavaScript 파일을 제공 할 수 있습니다. 경로는 JSON 문자열 또는 객체로 내보낼 수 있으며 함수에서 선택적으로 반환 할 수 있습니다.
prerender-urls.js
module . exports = [
{
url : '/' ,
title : 'Homepage' ,
} ,
{
url : '/route/random' ,
} ,
] ;
prerender-urls.js
export default ( ) => {
return [
{
url : '/' ,
title : 'Homepage' ,
} ,
{
url : '/route/random' ,
} ,
] ;
} ; 앱에서 사용하는 HTML 문서를 사용자 정의하려면 앱의 소스 디렉토리에서 template.ejs 파일을 편집하십시오.
EJS는 간단한 템플릿 언어로, 평범한 JavaScript로 HTML 마크 업을 생성 할 수 있습니다. html-webpack-plugin 과 함께 조건부로 HTML을 추가하고 번들과 자산에 액세스하고 원하는 경우 외부 콘텐츠에 연결할 수 있습니다. 프로젝트 초기화에서 제공하는 기본값은 대부분의 사용 사례에 매우 적합하지만 자유롭게 사용자 정의하십시오!
build 의 --template 플래그로 템플릿의 위치를 사용자 정의하고 명령을 watch 수 있습니다.
preact build --template renamed-src/template.ejs
preact watch --template template.ejs 기본 템플릿에는 각 구성 요소에 대한 .css 파일이 있습니다. 추가 패키지를 설치 한 다음 .css 파일을 교체하여 프로젝트 라이프 사이클 중에 언제든지 CSS 전 처리기 사용을 시작할 수 있습니다.
npm install --save-dev sass sass-loader@10 (PreACT 응용 프로그램 폴더 내부).css 파일을 .scss 파일로 교체하십시오 npm install --save-dev less less-loader@7 (preact 응용 프로그램 폴더 내부).css 파일을 .less 파일로 교체하십시오 PREACT_APP_ 로 자동으로 접두사 된 응용 프로그램에서 모든 환경 변수를 참조하고 사용할 수 있습니다.
src/index.js
console . log ( process . env . PREACT_APP_MY_VARIABLE ) ; 변수가 접두사가없는 경우 preact.config.js 를 사용하여 수동으로 추가 할 수 있습니다 (레시피 Wiki의 DefinePlugin 구성 참조).
DefinePlugin 직접 텍스트 교체를 수행한다는 점에 유의해야합니다. process 사용할 수 없습니다. process.env 빈 객체 일 수 있지만 process.env.PREACT_APP_MY_VARIABLE 여전히 자동으로 교체됩니다 (값이 존재하는 경우).
프로젝트의 루트에서 .env 파일을 사용하여 변수를 설정하고 저장할 수 있습니다.
.env
PREACT_APP_MY_VARIABLE="my-value"
preact.config.js 에서 환경 변수를 참조 할 수도 있습니다.
export default ( config , env , helpers , options ) => {
if ( process . env . MY_VARIABLE ) {
/** You can add a config here that will only used when your variable is truthy **/
}
} ;"Route"구성 요소는 빌드 시점에 자동으로 코드 스플릿하여 작은 번들을 생성하고 각 페이지에서 필요한 것보다 더 많은 코드를로드하지 않도록합니다. 이는 비동기 로더를 사용하여 경로 구성 요소의 가져 오기를 가로 채어 작동하며, 이는 코드를 매끄럽게 처리하는 경량 래퍼 구성 요소를 반환합니다.
자동 코드 분할은 다음 위치의 모든 JavaScript 및 TypeScript 파일에 적용됩니다.
| 무늬 | 예 |
|---|---|
SRC / 경로 / 이름 | src/routes/home.jssrc/routes/about/index.tsx |
SRC/ 구성 요소/ 경로 / 이름 | src/components/routes/profile.tssrc/components/routes/profile/index.js |
SRC/ 구성 요소/ 비동기 / 이름 | src/components/async/profile.tssrc/components/async/profile/index.js |
참고 : 자동 코드 분할은 명명 된 수출이 아닌 기본 내보내기 만 지원합니다.
- import { Profile } from './routes/profile'; + import Profile from './routes/profile';이것은 효과적인 코드 분할을 보장하는 의도적 인 제한입니다. 내보내기가 필요한 구성 요소의 경우 자동 코드 분할을 트리거하지 않는 디렉토리에 배치하십시오. 그런 다음 기본 내보내기를
routes/에서 재수술하거나"async!"로 가져 와서 기본 내보내기를 수동으로 코드 스플릿 할 수 있습니다. 접두사.
