web config

@appnest/web-config

Konfigurasi rollup untuk membantu Anda membangun aplikasi web modern.
_{Konfigurasi bekerja sangat baik dengan perpustakaan lit-html dan elemen lit. Saya ingin membagikannya sehingga Anda dapat menggunakannya juga atau membangun di atasnya.}

• Sebuah create-rollup-config.js yang dapat diperluas untuk menggunakan rollup dengan fitur-fitur manis seperti misalnya impor SCSS, pembuatan pekerja layanan dengan WorkBox, Reloading Langsung, Sumber Daya Koping, Chunking, Treeshaking, TypeScript, Minifying Produksi dan Kompresi dengan Brotli dan Gzip.
• create-karma-config.js yang dapat diperluas untuk membantu pengaturan pengujian karma Anda
• File tsconfig.json untuk mengonfigurasi naskah Anda
• File tslint.json untuk mengonfigurasi serat Anda
• File typings.d.ts untuk mengonfigurasi pengetikan Anda
• File .browserslistrc untuk mengonfigurasi bagaimana file Anda ditranspilasi
• File .gitignore yang dapat Anda gunakan sebagai inspirasi untuk file .gitignore Anda sendiri
• rollup-plugin-compress -plugin rollup yang mengompres file dalam bundel setelah membangun
• rollup-plugin-copy -plugin rollup yang menyalin sumber daya dari satu lokasi ke lokasi lain
• rollup-plugin-html-template -plugin rollup yang menyuntikkan titik masuk bundel ke dalam file html
• rollup-plugin-import-styles -plugin rollup yang memungkinkan untuk mengimpor file gaya menggunakan postcss
• rollup-plugin-live-reload -plugin rollup yang langsung memuat ulang file saat mereka berubah
• rollup-plugin-minify-lit-html -plugin rollup yang meminimalkan template lit-html lit
• rollup-plugin-replace -plugin rollup yang menggantikan impor dengan impor lain
• rollup-plugin-workbox -plugin rollup yang menggunakan WorkBox untuk menghasilkan pekerja layanan
• rollup-plugin-budget -Plugin rollup yang membandingkan ukuran file dengan anggaran yang ditentukan
• rollup-plugin-clean -Plugin rollup yang dibersihkan sebelum membangun kembali

➤ Daftar Isi

• ➤ Langkah 1 - Instalasi
• ➤ Langkah 2 - Setup rollup.config.ts
• ➤ Langkah 3 - Setup .eslintrc.json
• ➤ Langkah 4 - Setup tsconfig.json
• ➤ Langkah 5 - Setup .browserslistrc
• ➤ Langkah 6 - Setup karma.conf.js
• ➤ Langkah 7 - Tambahkan Mulai dan Bangun Script ke package.json
• ➤ Langkah 8 - Setup prettier.config.js
• ➤ Cara memuat stylesheets
  • Tambahkan yang berikut ke file typings.d.ts Anda!
  • Muat stylesheet global (akan ditambahkan ke file template)
  • Muat stylesheet sebagai string
• ➤ Kontributor
• ➤ Lisensi

➤ Langkah 1 - Instalasi

Cara tercepat untuk memulai adalah dengan menggunakan CLI. Jalankan perintah berikut untuk mengatur proyek Anda dari awal. Jika Anda memilih untuk menggunakan CLI, Anda dapat melewatkan sisa langkah dalam file readme ini.

 $ npm init web - config new < dir >

Untuk menggunakannya di proyek Anda, Anda dapat menginstalnya seperti ini.

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

➤ Langkah 2 - Setup rollup.config.ts

Berikut adalah contoh seperti apa file konfigurasi rollup Anda bisa terlihat:

 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"
} 

➤ Langkah 3 - Setup .eslintrc.json

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

➤ Langkah 4 - Setup tsconfig.json

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

➤ Langkah 5 - Setup .browserslistrc

Alat yang mentranspiling kode Anda menggunakan browserslist untuk mencari tahu apa yang didukung. .browserslistrc Anda bisa terlihat seperti ini.

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

➤ Langkah 6 - Setup karma.conf.js

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

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

➤ Langkah 7 - Tambahkan Mulai dan Bangun Script ke package.json

Di sini contoh tentang skrip apa yang dapat Anda tambahkan ke file package.json Anda.

 {
  ...
  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"
    ...
  }
  ...
}

➤ Langkah 8 - Setup prettier.config.js

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

➤ Cara memuat stylesheets

Tambahkan yang berikut ke file typings.d.ts Anda!

Ini untuk membuat naskah tidak mengeluh tentang SCSS, CSS dan Impor JSON.

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

Muat stylesheet global (akan ditambahkan ke file template)

Langkah 1: Impor stylesheet Anda menggunakan Sintaks Impor ES6

 import "./main.scss" ;

Langkah 2: Sertakan nama stylesheet di konfigurasi rollup Anda

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

Muat stylesheet sebagai string

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

➤ Kontributor

Andreas Mehlsen	Anda?

➤ Lisensi

Berlisensi di bawah MIT.