web config

@appnest/web-config

最新のWebアプリケーションの構築に役立つロールアップ構成。
_{構成は、ライブラリLit-HTMLとLit-Elementで非常にうまく機能します。あなたもそれを使用したり、その上に構築できるように共有したかったのです。}

• SCSSのインポート、ワークボックスを備えたサービスワーカーの生成、ライブリロード、対処、チャンク、トレシェーキング、タイプスクリプト、生産のマイニル化、BrotliおよびGZIPの圧縮など、甘い機能を備えたロールcreate-rollup-config.jsを使用するための拡張可能なCreate-Rollup-Config.js。
• カルマテストのセットアップを支援する拡張可能なcreate-karma-config.js
• tsconfig.jsonファイルは、typeScriptを構成します
• 糸くずを構成するtslint.jsonファイル
• typings.d.tsファイルを構成するためのファイル
• ファイルの導入方法を構成するための.browserslistrcファイル
• .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ワークボックスを使用してサービスワーカーを生成するロールアッププラグイン
• rollup-plugin-budgetファイルのサイズを指定された予算と比較するロールアッププラグイン
• rollup-plugin-clean再構築前にディレクトリをクリーンにするロールアッププラグイン

➤目次

• ➤ステップ1-インストール
• ➤ステップ2 rollup.config.tsのセットアップ
• ➤ステップ3-セットアップ.eslintrc.json
• ➤ステップ4 tsconfig.jsonをセットアップします
• ➤ステップ5-セットアップ.browserslistrc
• ➤ステップ6 karma.conf.jsをセットアップします
• ➤ステップ7- startsスクリプトを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- startsスクリプトを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ファイルに以下を追加してください！

これは、SCS、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" ; 

➤貢献者

アンドレアス・メルセン	あなた？

➤ライセンス

MITの下でライセンスされています。