sfpack
a module compiler
Last updated 15 days ago by liberalist .
ISC · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install sfpack 
SYNC missed versions from official npm registry.

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>

Current Tags

  • 2.0.2                                ...           latest (15 days ago)
  • 0.0.4-beta2                                ...           next (a year ago)

25 Versions

  • 2.0.2                                ...           15 days ago
  • 2.0.1                                ...           15 days ago
  • 2.0.0                                ...           15 days ago
  • 0.2.4                                ...           7 months ago
  • 0.2.3                                ...           7 months ago
  • 0.2.2                                ...           8 months ago
  • 0.2.1-beta1                                ...           10 months ago
  • 0.2.1                                ...           a year ago
  • 0.2.0                                ...           a year ago
  • 0.1.0                                ...           a year ago
  • 0.0.7                                ...           a year ago
  • 0.0.6                                ...           a year ago
  • 0.0.5                                ...           a year ago
  • 0.0.4-beta2                                ...           a year ago
  • 0.0.4-beta1                                ...           a year ago
  • 0.0.4                                ...           a year ago
  • 0.0.3-beta1                                ...           a year ago
  • 0.0.3                                ...           a year ago
  • 0.0.2-beta2                                ...           a year ago
  • 0.0.2-beta1                                ...           a year ago
  • 0.0.2                                ...           a year ago
  • 0.0.1-beta3                                ...           a year ago
  • 0.0.1-beta2                                ...           a year ago
  • 0.0.1-beta1                                ...           a year ago
  • 0.0.1                                ...           a year ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 46
Dependencies (17)
Dev Dependencies (2)
Dependents (0)
None

Copyright 2014 - 2017 © taobao.org |