web config

@appnest/web-config

최신 웹 애플리케이션을 구축하는 데 도움이되는 롤업 구성.
_{이 구성은 라이브러리 Lit-HTML 및 Lit-Element에서 매우 잘 작동합니다. 나는 당신도 그것을 사용하거나 그것을 위에 쌓을 수 있도록 그것을 공유하고 싶었습니다.}

• SCSS 가져 오기, WorkBox를 사용한 서비스 작업자 생성, 라이브 재 장전, 대처 리소스, 청킹, 트레시, TypeScript, Brotli 및 GZIP를 사용한 생산 및 압축과 같은 달콤한 기능이있는 롤업을 사용하기위한 확장 가능한 create-rollup-config.js Config.js.
• 카르마 테스트 설정에 도움이되는 확장 가능한 create-karma-config.js
• tsconfig.json 파일을 구성하려면 TSCONFIG.JSON 파일입니다
• Linting을 구성하려면 tslint.json 파일
• 타이핑을 구성하려면 typings.d.ts 파일
• 파일 전송 방법을 구성하려면 .browserslistrc 파일
• a .gitignore 파일 자신의 .gitignore 파일에 영감으로 사용할 수 있습니다.
• rollup-plugin-compress 빌딩 후 번들의 파일을 압축하는 롤업 플러그인
• rollup-plugin-copy 한 위치에서 다른 위치로 리소스를 복사하는 롤업 플러그인
• rollup-plugin-html-template 번들 입력 지점을 HTML 파일에 주입하는 롤업 플러그인
• rollup-plugin-import-styles Postcss를 사용하여 스타일 파일을 가져올 수있는 롤업 플러그인
• rollup-plugin-live-reload 변경 될 때 파일을 다시로드하는 롤업 플러그인
• rollup-plugin-minify-lit-html HTML 템플릿을 미니딩하는 롤업 플러그인
• rollup-plugin-replace 오기를 다른 가져 오기로 대체하는 롤업 플러그인
• rollup-plugin-workbox Workbox를 사용하여 서비스 작업자를 생성하는 롤업 플러그인
• rollup-plugin-budget 파일의 크기를 지정된 예산과 비교하는 롤업 플러그인
• rollup-plugin-clean 재건하기 전에 디렉토리를 깨끗하게하는 롤업 플러그인

➤ 목차

• ➤ 1 단계 - 설치
• ➤ 2 단계 - 설정 rollup.config.ts
• ➤ 3 단계 - 설정 .eslintrc.json
• ➤ 4 단계 - 설정 tsconfig.json 설정합니다
• ➤ 5 단계 - 설정 .browserslistrc
• ➤ 6 단계 - karma.conf.js 설정합니다
• ➤ 7 단계 - package.json 에 시작 및 빌드 스크립트를 추가합니다.
• ➤ 8 단계 - Setup prettier.config.js
• ➤ 스타일 시트를로드하는 방법
  • typings.d.ts 파일에 다음을 추가하십시오!
  • 글로벌 스타일 시트를로드합니다 (템플릿 파일에 추가됩니다)
  • 스타일 시트를 문자열로로드하십시오
• ➤ 기고자
• ➤ 라이센스

➤ 1 단계 - 설치

시작하는 가장 빠른 방법은 CLI를 사용하는 것입니다. 다음 명령을 실행하여 프로젝트를 처음부터 설정하십시오. CLI를 사용하기로 선택한 경우이 readme 파일의 나머지 단계를 건너 뛸 수 있습니다.

 $ npm init web - config new < dir >

프로젝트에서 사용하려면 이렇게 설치할 수 있습니다.

 $ npm i @ appnest / web - config -- D 

➤ 2 단계 - 설정 rollup.config.ts

다음은 롤업 구성 파일이 어떻게 보일 수 있는지에 대한 예입니다.

 import { resolve , join } from "path" ;
import pkg from "./package.json" ;
import {
  defaultExternals ,
  defaultOutputConfig ,
  defaultPlugins ,
  defaultProdPlugins ,
  defaultServePlugins ,
  isLibrary ,
  isProd ,
  isServe
} from "@appnest/web-config" ;

const folders = {
  dist : resolve ( __dirname , "dist" ) ,
  src : resolve ( __dirname , "src/demo" ) ,
  src_assets : resolve ( __dirname , "src/demo/assets" ) ,
  dist_assets : resolve ( __dirname , "dist/assets" )
} ;

const files = {
  main : join ( folders . src , "main.ts" ) ,
  src_index : join ( folders . src , "index.html" ) ,
  dist_index : join ( folders . dist , "index.html" )
} ;

export default {
  input : {
    main : files . main
  } ,
  output : [
    defaultOutputConfig ( {
      dir : folders . dist ,
      format : "esm"
    } )
  ] ,
  plugins : [
    ... defaultPlugins ( {
      copyConfig : {
        resources : [ [ folders . src_assets , folders . dist_assets ] ] ,
      } ,
      cleanerConfig : {
        targets : [
          folders . dist
        ]
      } ,
      htmlTemplateConfig : {
        template : files . src_index ,
        target : files . dist_index ,
        include : / main(-.*)?.js$ /
      } ,
      importStylesConfig : {
        globals : [ "main.scss" ]
      }
    } ) ,

    // Serve
    ... ( isServe ? [
        ... defaultServePlugins ( {
            dist : folders . dist
        } )
    ] : [ ] ) ,

    // Production
    ... ( isProd ? [
        ... defaultProdPlugins ( {
            dist : folders . dist
        } )
    ] : [ ] )
  ] ,
  treeshake : isProd ,
  context : "window"
} 

➤ 3 단계 - 설정 .eslintrc.json

{
  "extends" : " ./node_modules/@appnest/web-config/eslint.js "
}

➤ 4 단계 - 설정 tsconfig.json 설정합니다

{
  "extends" : " ./node_modules/@appnest/web-config/tsconfig.json "
}

➤ 5 단계 - 설정 .browserslistrc

코드를 전환하는 도구는 browserslist 사용하여 지원되는 내용을 파악합니다. .browserslistrc 는 다음과 같이 보일 수 있습니다.

 last 2 Chrome versions
last 2 Safari versions
last 2 Firefox versions

➤ 6 단계 - karma.conf.js 설정합니다

 const { defaultResolvePlugins , defaultKarmaConfig } = require ( "@appnest/web-config" ) ;

module . exports = ( config ) => {
  config . set ( {
    ... defaultKarmaConfig ( {
      rollupPlugins : defaultResolvePlugins ( )
    } ) ,
    basePath : "src" ,
    logLevel : config . LOG_INFO
  } ) ;
} ; 

➤ 7 단계 - package.json 에 시작 및 빌드 스크립트를 추가합니다.

여기서는 package.json 파일에 추가 할 수있는 스크립트에 대한 예입니다.

 {
  ...
  scripts: {
    "b:dev": "rollup -c --environment NODE_ENV:dev",
    "b:prod": "rollup -c --environment NODE_ENV:prod",
    "s:dev": "rollup -c --watch --environment NODE_ENV:dev",
    "s:prod": "rollup -c --watch --environment NODE_ENV:prod",
    "s": "npm run s:dev"
    ...
  }
  ...
}

➤ 8 단계 - Setup prettier.config.js

 module . exports = {
   ... require ( "../node_modules/@appnest/web-config/rettier.config.js" )
} ; 

➤ 스타일 시트를로드하는 방법

typings.d.ts 파일에 다음을 추가하십시오!

이것은 SCSS, CSS 및 JSON 가져 오기에 대해 TypeScript를 불평하지 않는 것입니다.

 /// <reference path="node_modules/@appnest/web-config/typings.d.ts" />

글로벌 스타일 시트를로드합니다 (템플릿 파일에 추가됩니다)

1 단계 : ES6 가져 오기 구문을 사용하여 스타일 시트 가져 오기

 import "./main.scss" ;

2 단계 : 롤업 구성에 스타일 시트 이름 포함

 export default {
  ...
    defaultPlugins ( {
       ...
       importStylesConfig : {
         globals : [ "main.scss" ]
       } ,
       ...
    } ) ,
  ...
}

스타일 시트를 문자열로로드하십시오

 import css from "./my-component.scss" ; 

➤ 기고자

Andreas Mehlsen	너?

➤ 라이센스

MIT에 따라 라이센스.