web config

@appnest/web-config

การกำหนดค่าการหมุนเพื่อช่วยให้คุณสร้างเว็บแอปพลิเคชันที่ทันสมัย
_{การกำหนดค่าใช้งานได้ดีมากกับไลบรารีที่มีแสงสว่างและองค์ประกอบแสง ฉันต้องการแบ่งปันเพื่อให้คุณสามารถใช้มันได้หรือสร้างขึ้นมา}

• create-rollup-config.js ที่ขยายได้สำหรับการใช้การโรลอัลกับคุณสมบัติหวานเช่นการนำเข้า SCSS การสร้างงานบริการที่มีกล่องทำงานการโหลดสดการรับมือทรัพยากรการเผชิญปัญหา chunking, treeshaking, typeescript
• create-karma-config.js ที่ขยายได้เพื่อช่วยในการตั้งค่าการทดสอบกรรมของคุณ
• ไฟล์ tsconfig.json เพื่อกำหนดค่า typescript ของคุณ
• ไฟล์ tslint.json เพื่อกำหนดค่าผ้าสำลีของคุณ
• ไฟล์ typings.d.ts เพื่อกำหนดค่าการพิมพ์ของคุณ
• ไฟล์ .browserslistrc เพื่อกำหนดค่าวิธีการ transpiled ไฟล์ของคุณ
• ไฟล์ .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 ปลั๊กอินโรลอัพที่ minifies lit-html templates
• 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 - ตั้งค่า 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 - ตั้งค่า prettier.config.js

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

➤วิธีโหลดสไตล์ชีท

เพิ่มไฟล์ typings.d.ts ของคุณต่อไปนี้!

นี่คือการทำให้ TypeScript ไม่บ่นเกี่ยวกับ SCSS, CSS และ JSON นำเข้า

 /// <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