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 🙏

© 2025 – Pkg Stats / Ryan Hefner

@wannasky/cli

v1.7.11

Published

前端打包cli工具

Downloads

526

Readme

@wannasky/cli

脚手架工具,以后慢慢维护

wans server

  1. wans server config.js

    指定config.js配置文件启动,不指定调用根目录wans.config.js

  2. wans server --help

    查看配置帮助信息

wans jshint

  1. wans jshint config.js

    指定config.js配置文件启动,不指定调用根目录wans.config.js

  2. wans jshint --help

    查看配置帮助信息

wans compress

  1. wans compress config.js

    指定config.js配置文件启动,不指定调用根目录wans.config.js

  2. wans compress --help

    查看配置帮助信息

示例配置如下:

module.exports = {

    //端口号
    port: 8080,

    //根目录
    root: './public',
    
    //jshint配置
    jsHint: {
        files: ['src/test/**/*.js', 'src/index.js'],
        exclude: ['src/test/**/*.spec.js', 'src/test/**/*.min.js'],
        options: {
            eqeqeq: true
            //...
        }
    },
    
    //压缩相关配置
    compress: {
        src: './test/__test__/compress/src',
        dist: './test/__test__/compress/dist',
        files: ['**/*.js', '/**/*.css', '**/*.scss'],
        exclude: ['/**/*.min.js', '/lib/**/*.js'],
        framework: ['angular'],
        filename: {
            'css': '../css/[name].[ext]',
            'js': '[name].min.[ext]'
        }
    },

    //本地静态资源路径重定向
    local: {
        '^/test/': '../test/',
    },

    //代理设置
    proxy: {
        '^/5aV1bjqh_Q23odCf': 'https://ss0.bdstatic.com/',
        '/api/test': {
            target: 'https://test.dyn.com',
            headers: {
                host: 'aa.cc.com'
            }
        }
    },

    //路由设置
    router: {

        '/router/:id': {
            get: (req, res, query, mock) => {
                console.log('query', query);
                res.json(mock(mock.object({
                    name: 'wannasky',
                    age: 25,
                    books: mock.array({
                        length: mock.random(5, 10),
                        item: mock.object({
                            title: mock.text('book-', mock.index),
                            isbn: mock.random(1000, 2000, true)
                        })
                    })
                })))
            }
        },

        '/wannasky/test': {
            post: (req, res, query, mock) => {
                console.log('query', query);
                res.json({success: true})
            }
        }
    },
    
    //测试json目录
    //当路由,代理,静态资源都获取不到时,再尝试获取.json后缀的文件
    testJsonDir: './__test__/json'
}

代理数据保存并离线使用

通过配置 proxySave = true并指定testJsonDir

module.exports = {
    port: '8888',
    root: './',
    proxy: {
        '/': {      // 这里是把所有请求都走代理
            target: 'https://xx.xxx.xx.xx'
        }
    },
    proxySave: true,    // 代理的数据保存本地
    
    testJsonDir: '__test'   // 代理数据保存的文件目录
}

通过以上配置会在__test目录下生成代理的文件及映射关系(manifest.json),然后通过配置 useManifest来使用

module.exports = {
    port: '8888',
    root: './',
    useManifest: true,  // 使用manifest.json配置来完成代理    
    testJsonDir: '__test'   // 代理数据保存的文件目录
}

options参数支持说明

{
    css: {
        // sourceMap: true   //编译后的css所在目录
        // souceMap: '../map'  // 相对dist配置目录
    },
    compress: {
        drop_console: false,  //见 https://www.npmjs.com/package/uglify-js
    }
}

local配置详情

默认会建立symbol link,可通过 #copy改变默认行为为复制,再通过#watch(依附于#copy)来进行文件双向变更检测 eg:


{
    local: {
        'web/test': 'E:\\repo\\test#copy',      // 仅复制 
        'web/one': 'E:\\repo\\one#copy#watch'   // 文件复制及文件双向监听
    }    
}

router配置详情

get或者post对应的方法参数有req, res, query, mock;其中 res包括如下方法:

  • res.json(value: {}) 用来返回json内容

  • res.renderUrl(url: string) 返回指定文件内容,Content-Type会根据文件后缀自动匹配

  • res.next() 当条件判断失败后,可以主动调用,可模拟 nginx $try_files, eg:

router: {
    '/project/dist/module/': {
        get: (req, res) => {
            if(req.url === '/project/dist/module/' || !path.parse(req.url).ext) {
                res.renderUrl('./project/dist/index.html')
            } else {
                res.next();
            }
        }
    }
}

LICENSE

MIT