npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

sfpack

v2.0.2

Published

a module compiler

Downloads

5

Readme

sfpack

场景

开发一个静态小页面,想用 sass、es6,却苦于环境配置

开发一个静态长页面,需要模块化开发,却无从下手


以 html 为入口的模块化打包工具, 适合轻量级静态页面构建

  1. 完全的模块化构建
  2. 静态依赖自动解析
  3. 默认支持 es6、sass
  4. 支持多页构建
  5. 支持静态压缩、版本 hash
  6. 浏览器自动刷新
  7. 支持资源内联
  8. 支持sfc方式
  9. 项目模版 cli

甚至支持构建Vue sfc项目!

用法

npm i -g sfpack -g

开始一个 sfpack 项目

sfpack --init=demo

cd demo

npm run dev

默认已经支持 sass 和基础 es6 语法,如果不满足需求可以自定义.babelrc

理论上开箱即可开发

打包:配置文件方式

sfpack --config=./pack.config

默认在当前目录寻找pack.config.js文件

module.exports = {
    entry: ["./page1", "./page2"],
    dist: "./dist",
    publicPath: "./",
    compress: false, // default: false 不压缩静态
    hash: false, // default: false 静态不打版本
    inline: false, // inline: true || ["./src/page2"] 静态内联
    devServer: {
        // devServer: true 会采用默认配置 http://www.browsersync.cn/docs/options/
        server: {
            baseDir: "./dist"
        },
        port: 8080
    },

    plugins: []
};

提供了简单的基于事件的插件干预资源生成

plugins: {
  ['AFTER_MERGE_HTML'](complier) {
    console.log(complier.page + ' is compilation....');
  },
  'AFTER_MERGE_SCRIPT': [complier => {
    complier.compilation.script = 'console.log("replaced...")'
  }, complier => {
    complier.compilation.script += ';console.log("顺序执行...")'
  }],
  ['AFTER_MERGE_STYLE'](complier) {
    complier.compilation.style = `
      * {
          font-size: 20px
      }
    `
  }
}

事件列表

  • AFTER_MERGE_HTML: html 资源合并后
  • AFTER_MERGE_SCRIPT: js 资源合并后
  • AFTER_MERGE_STYLE: css 资源合并后

打包:命令行方式打包单页面

sfpack --entry=./page1 --publicPath=dist

模块

参考example/src/page1

依赖 component 模块:

<component src="./component"/>
-page
    -component
        -index.html
        -index.js
        -index.scss
   -index.html

效果: 1. 引入 ./component/index.html 2. ./component/index.js./component/index.scss若存在会自动被解析引入

单文件模块

sfc形式文件引入方式同普通模块,会被自动解析

<template>
      <div class="m-sfc">
        ...
      </div>
</template>

<script>
      console.log('sfc形式...')
</script>

<style>
      .m-sfc {}
</style>