web config
1.0.0
Uma configuração de rollup para ajudá -lo a criar aplicativos da Web modernos.
A configuração funciona extremamente bem com as bibliotecas lit-html e o elemento literário. Eu queria compartilhá -lo para que você também pudesse usá -lo ou construir em cima dele.
create-rollup-config.js para usar o Rollup com recursos doces, como por exemplo, importações de SCSS, geração de trabalhadores de serviço com caixa de trabalho, recarga ao vivo, recursos de enfrentamento, pilhagem, treingo de trehescha, minificação de produção e compactação com Brotli e Gzip.create-karma-config.js para ajudar com sua configuração de teste de karmatsconfig.json para configurar seu datilogramatslint.json para configurar seu revestimentotypings.d.ts para configurar suas tímidas.browserslistrc para configurar como seus arquivos são transpilados.gitignore que você pode usar como inspiração para seu próprio arquivo .gitignorerollup-plugin-compress -Um plug-in Rollup que comprime os arquivos no pacote após a construçãorollup-plugin-copy -um plug-in Rollup que copia recursos de um local para outrorollup-plugin-html-template -Um plug-in Rollup que injeta os pontos de entrada do pacote em um arquivo htmlrollup-plugin-import-styles -Um plug-in Rollup que possibilita a importação de arquivos de estilo usando POSTCSSrollup-plugin-live-reload -Um plug-in Rollup que recarregue os arquivos ao vivo à medida que mudamrollup-plugin-minify-lit-html -Um plug-in Rollup que minifica os modelos de litro-htmlrollup-plugin-replace -um plug-in Rollup que substitui uma importação por outra importaçãorollup-plugin-workbox -um plug-in Rollup que usa Workbox para gerar um trabalhador de serviçorollup-plugin-budget -Um plug-in Rollup que compara os tamanhos dos arquivos a um orçamento especificadorollup-plugin-clean -um plug-in Rollup que limpa diretórios antes da reconstrução rollup.config.ts.eslintrc.jsontsconfig.json.browserslistrckarma.conf.jspackage.jsonprettier.config.jstypings.d.ts !A maneira mais rápida de começar é usar a CLI. Execute o seguinte comando para configurar seu projeto do zero. Se você optar por usar a CLI, poderá pular o restante das etapas neste arquivo ReadMe.
$ npm init web - config new < dir >Para usá -lo em seu projeto, você pode instalá -lo assim.
$ npm i @ appnest / web - config -- D rollup.config.tsAqui está um exemplo sobre como seu arquivo de configuração de rollup pode ser:
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 As ferramentas que transpalham seu código estão usando browserslist para descobrir o que é suportado. Seu .browserslistrc poderia parecer assim.
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 Aqui, um exemplo sobre quais scripts você pode adicionar ao seu arquivo 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 !Isso é para fazer com que o TypeScript não esteja reclamando sobre as importações de SCSS, CSS e JSON.
/// <reference path="node_modules/@appnest/web-config/typings.d.ts" />Etapa 1: importe sua folha de estilo usando a sintaxe de importação ES6
import "./main.scss" ;Etapa 2: inclua o nome da folha de estilo em sua configuração de rollup
export default {
...
defaultPlugins ( {
...
importStylesConfig : {
globals : [ "main.scss" ]
} ,
...
} ) ,
...
} import css from "./my-component.scss" ; | Andreas Mehlsen | Você? |
Licenciado sob o MIT.
