web config
1.0.0
Une configuration ROLUP pour vous aider à créer des applications Web modernes.
La configuration fonctionne extrêmement bien avec les bibliothèques Lit-HTML et Lit-Element. Je voulais le partager pour que vous puissiez l'utiliser également ou en construire.
create-rollup-config.js pour l'utilisation de Rollup avec des fonctionnalités douces, car par exemple les importations SCSS, la génération de travailleurs de service avec une boîte de travail, le rechargement en direct, les ressources d'adaptation, le morceau, le treehaking, le dactylographie, la production de production et la compression avec Brotli et Gzip.create-karma-config.jstsconfig.json pour configurer votre dactylographietslint.json pour configurer votre lietypings.d.ts pour configurer vos dactylographiques.browserslistrc pour configurer comment vos fichiers sont transpirés.gitignore que vous pouvez utiliser comme inspiration pour votre propre fichier .gitignorerollup-plugin-compress - Un plugin Rollup qui comprime les fichiers dans le bundle après la constructionrollup-plugin-copy - Un plugin Rollup qui copie les ressources d'un endroit à un autrerollup-plugin-html-template - Un plugin Rollup qui injecte les points d'entrée du bundle dans un fichier HTMLrollup-plugin-import-styles - Un plugin Rollup qui permet d'importer des fichiers de style à l'aide de PostCSSrollup-plugin-live-reload - un plugin rollup qui recharge les fichiers en direct lorsqu'ils changentrollup-plugin-minify-lit-html - Un plugin Rollup qui divise les modèles Lit-HTMLrollup-plugin-replace - un plugin Rollup qui remplace une importation par une autre importationrollup-plugin-workbox - un plugin Rollup qui utilise Workbox pour générer un travailleur de servicerollup-plugin-budget - Un plugin Rollup qui compare les tailles des fichiers à un budget spécifiérollup-plugin-clean - un plugin Rollup qui nettoie les répertoires avant de reconstruire rollup.config.ts.eslintrc.jsontsconfig.json.browserslistrckarma.conf.jspackage.jsonprettier.config.jstypings.d.ts !Le moyen le plus rapide de commencer est d'utiliser la CLI. Exécutez la commande suivante pour configurer votre projet à partir de zéro. Si vous choisissez d'utiliser la CLI, vous pouvez ignorer le reste des étapes de ce fichier ReadMe.
$ npm init web - config new < dir >Pour l'utiliser dans votre projet, vous pouvez l'installer comme ceci.
$ npm i @ appnest / web - config -- D rollup.config.tsVoici un exemple sur ce à quoi pourrait ressembler votre fichier de configuration ROLUP:
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"
} .eslintrc.json {
"extends" : " ./node_modules/@appnest/web-config/eslint.js "
}tsconfig.json {
"extends" : " ./node_modules/@appnest/web-config/tsconfig.json "
}.browserslistrc Les outils qui transmettent votre code utilisent browserslist pour déterminer ce qui est pris en charge. Votre .browserslistrc pourrait ressembler à ceci.
last 2 Chrome versions
last 2 Safari versions
last 2 Firefox versions
karma.conf.js const { defaultResolvePlugins , defaultKarmaConfig } = require ( "@appnest/web-config" ) ;
module . exports = ( config ) => {
config . set ( {
... defaultKarmaConfig ( {
rollupPlugins : defaultResolvePlugins ( )
} ) ,
basePath : "src" ,
logLevel : config . LOG_INFO
} ) ;
} ; package.json Ici, un exemple sur les scripts que vous pourriez ajouter à votre fichier 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"
...
}
...
}
prettier.config.js module . exports = {
... require ( "../node_modules/@appnest/web-config/rettier.config.js" )
} ; typings.d.ts !Il s'agit de faire en sorte que TypeScript ne se plaigne pas des importations SCSS, CSS et JSON.
/// <reference path="node_modules/@appnest/web-config/typings.d.ts" />Étape 1: Importez votre feuille de style à l'aide de la syntaxe d'importation ES6
import "./main.scss" ;Étape 2: Incluez le nom de la feuille de style dans votre configuration de rouleau
export default {
...
defaultPlugins ( {
...
importStylesConfig : {
globals : [ "main.scss" ]
} ,
...
} ) ,
...
} import css from "./my-component.scss" ; | Andreas Mehlsen | Toi? |
Licencié sous MIT.
