web config

@appnest/web-config

تكوين Rollup لمساعدتك في بناء تطبيقات الويب الحديثة.
_{يعمل التكوين بشكل جيد للغاية مع المكتبات Lit-HTML و Lit-Element. أردت مشاركته حتى تتمكن من استخدامه أيضًا أو البناء فوقه.}

• A create-rollup-config.js قابلة للتمديد لاستخدام Rollup مع ميزات STOW ، على سبيل المثال ، واردات SCSS ، وتوليد عامل الخدمة مع صندوق العمل ، وإعادة التحميل المباشر ، وموارد المواجهة ، والتشكيل ، والتربية ، والتكوين ، والتوريد الإنتاج والضغط مع Brotli و GZIP.
• create-karma-config.js قابل للتمديد للمساعدة في إعداد اختبار الكرمة الخاص بك
• ملف tsconfig.json لتكوين TypeScript
• ملف tslint.json لتكوين linting الخاص بك
• ملف typings.d.ts لتكوين الطباعات الخاصة بك
• ملف .browserslistrc لتكوين كيفية نقل ملفاتك
• ملف .gitignore يمكنك استخدامه كمصدر إلهام لملف .gitignore الخاص بك
• rollup-plugin-compress مكون إضافي Rollup يضغط الملفات الموجودة في الحزمة بعد الإنشاء
• rollup-plugin-copy مكون إضافي Rollup يقوم بنسخ الموارد من موقع إلى آخر
• rollup-plugin-html-template مكون إضافي يقوم بإصدار نقاط إدخال الحزمة في ملف HTML
• rollup-plugin-import-styles مكون إضافي Rollup يجعل من الممكن استيراد ملفات النمط باستخدام postcss
• rollup-plugin-live-reload مكون إضافي Rollup يقوم بملفات إعادة التحميل المباشرة أثناء تغييرها
• rollup-plugin-minify-lit-html مكون إضافي Rollup يقوم بتأليف قوالب Lit-HTML
• rollup-plugin-replace مكون إضافي Rollup يحل محل استيراد باستيراد آخر
• rollup-plugin-workbox مكون إضافي يستخدم Rollup Workbox لإنشاء عامل خدمة
• rollup-plugin-budget إضافي Rollup يقارن أحجام الملفات بميزانية محددة
• rollup-plugin-clean مكون إضافي Rollup يقوم بتنظيف الدلائل قبل إعادة البناء

➤ جدول المحتويات

• ➤ الخطوة 1 - التثبيت
• ➤ الخطوة 2 - الإعداد rollup.config.ts
• ➤ الخطوة 3 - الإعداد .eslintrc.json
• ➤ الخطوة 4 - الإعداد tsconfig.json
• ➤ الخطوة 5 - الإعداد .browserslistrc
• ➤ الخطوة 6 - الإعداد karma.conf.js
• ➤ الخطوة 7 - أضف START و Build Scripts إلى 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

إليك مثال على ما يمكن أن يبدو عليه ملف تكوين Rollup:

 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 - أضف START و Build Scripts إلى 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 لا يشكو من واردات SCS و CSS و JSON.

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

قم بتحميل ورقة الأنماط العالمية (ستتم إضافتها إلى ملف القالب)

الخطوة 1: استيراد ورقة الأنماط الخاصة بك باستخدام بناء جملة استيراد ES6

 import "./main.scss" ;

الخطوة 2: قم بتضمين اسم ورقة الأنماط في تكوين Rollup الخاص بك

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

تحميل ورقة الأنماط كسلسلة

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

➤ المساهمين

أندرياس مهيلسن	أنت؟

➤ الترخيص

مرخصة تحت معهد ماساتشوستس للتكنولوجيا.