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

➤许可证

根据麻省理工学院许可。