web config

@appnest/web-config

匯總配置，可幫助您構建現代的Web應用程序。
_{該配置與圖書館Lit-HTML和Litemement非常有效。我想分享它，以便您也可以使用它或在它上面構建。}

• 可擴展的create-rollup-config.js用於使用帶有甜美功能的匯總，例如SCSS Imports，使用工作箱的服務工作人員，實時重新加載，應對資源，塊狀，構造，TreeSharking，Tysectript，Production CropoartiCt，生產範圍，用Brotli和Gzip進行壓縮。
• 可擴展的create-karma-config.js來幫助您的業力測試設置
• tsconfig.json文件以配置您的打字稿
• 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 ，該插件可減小LIT-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-添加啟動並構建腳本到package.json
• ➤步驟8-設置prettier.config.js
• ➤如何加載樣式表
  • 將以下內容添加到您的typings.d.ts文件！
  • 加載全局樣式表（將添加到模板文件中）
  • 將樣式表作為字符串加載
• ➤貢獻者
• ➤許可證

➤步驟1-安裝

最快開始的方法是使用CLI。運行以下命令以從頭開始設置項目。如果您選擇使用CLI，則可以跳過此Indme文件中的其餘步驟。

 $ 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-設置prettier.config.js

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

➤如何加載樣式表

將以下內容添加到您的typings.d.ts文件！

這是為了使打字稿不抱怨SCSS，CSS和JSON Imports。

 /// <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）	你？

➤許可證

根據麻省理工學院許可。