This package has been deprecated

Author message:

this package has been deprecated

wefe

1.4.14 • Public • Published

wefe

We are the front end engineer!

node version npm download NPM count License

wefe是基于webpack实现的二次编译工具,基于webpack-chain做链式流。

它提供了如下基本功能:

  1. 脚手架生产初始化项目(full、vue、hello)
  2. webpack项目编译,集成插件化,可以配置大量custom plugin个性化
  3. webpack-dev-server本地实时预览开发
  4. 根据publish-plugin,自定义发布类型,默认走sftp
  5. 未来插件化支持更多框架、更多个性化编译参数集成
  6. 环境配置化隔离,dev、test、gamma、idc

安装启动

安装Node

推荐安装最新的 LTS 版本Node,如果本地没有安装Node或安装了低版本的Node,可以按下面的指引安装最新版的Node:

Node安装完成后,在命令行执行 node -v 查看下对应的Node版本是否安装成功:

$ node -v
v8.11.2

安装wefe

Node安装成功后,执行如下npm命令安装wefe (Mac或Linux的非root用户需要在命令行前面加sudo,如:sudo npm install -g wefe

npm install -g wefe

npm默认镜像是在国外,有时候安装速度很慢或者出现安装不了的情况,如果无法安装或者安装很慢,可以使用taobao的镜像安装:

npm install cnpm -g --registry=https://registry.npm.taobao.org
cnpm install -g wefe

或者直接指定镜像安装:
npm install wefe -g --registry=https://registry.npm.taobao.org

wefe安装完成后,执行命令 wefe help ,查看wefe的帮助信息:

$ wefe help

Usage: wefe <command> [options]

Commands:

    init                       生产模版文件
    dll                        dll资源编译
    server                     本地启动服务
    build                      输出编译文件
    publish                    发布编译文件
    help                       Display help information

Options:

    -e, --entry [entry]        指定编译入口, 如./src/pages/index/index.js (default: )
    -p, --page [page]          指定编译页面,pages结构下的文件名,如index
    -m, --mode [mode]          编译模式, 如local,test,prod (default: prod)
    -M, --mode [mode]          编译模式, 如local,test,prod (default: prod)
    -E, --env [env]            编译环境, 如dev,test,gamma,idc (default: dev)
    -P, --platform [platform]  编译终端, 如web,weex,mp (default: web)
    -v, --version              版本
    -V, --version              output the version number
    -h, --help                 output usage information

脚手架

wefe init [template] [projectName] [projectPath]

Note: 默认生产的项目都有wefe.config.js编译配置文件,里面可以自定义很多参数、插件

Note: init初始化项目,根目录下会创建一份.babelrc

本地server开发:

wefe server

本地编译文件输出:

wefe build

发布编译文件

wefe publish

Note: -M 可以指定编译模式,默认为prod生产,将开启额外配置项

Note: -E 指定编译环境,默认dev,并且用优先使用wefe-config.js里的devConfig

Note: -P 指定编译终端,默认web

链式配置化

项目wefe.config.js配置文件中,可以定义相关配置

  1. webpack -编译过程webpack-config参数设置
  2. lifeCycle -编译过程生命周期指令,beginAction、compiler、publish、endAction
  3. preset -自定义一些共性插件,比如fix修补webpack参数,action发布指令,command集成其他命令
  4. baseConfig-编译基础参数配置,path等

Note: wefe.config.js会有4个环境配置(devConfig、betaConfig、gammaConfig、idcConfig),结构与外层结构一样,指定环境会优先使用

let webpackConfig = util.findConfig();
let envConfig = Object.assign({}, webpackConfig[`${env}Config`]);
webpackConfig = merge(webpackConfig, envConfig);

webpack

webpack: {
    plugin: {
      "OpenBrowserPlugin": {
        plugin: OpenBrowserPlugin,
        args: [{
          url: `http://127.0.0.1:9394/local/html/index.html`
        }]
      }
    },
    devServer: {
      port: 9394,
      host: '127.0.0.1',
      contentBase: './dist',
      compress: true,
      historyApiFallback: true,
      disableHostCheck: true,
      headers: {
        'X-Custom-Foo': 'bar',
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, PATCH, OPTIONS',
        'Access-Control-Allow-Headers': 'X-Requested-With, content-type, Authorization',
      }
    },
  },

Note: webpack配置用都是webpack-chain,详细见Merging Config

lifeCycle

beginAction: [
    modulePath | function,
    options
]
compiler: [
    modulePath | function,
    options,
    callback
]
publish: [
    'wefe-action-publish', 
    {
        dist: path.resolve(`${process.cwd()}/dist/publish/web/`), // 编译路径
        mkdir: '',
        path: {
          html: '',
          css: '',
          js: '',
          image: ''
        },
        // 发布目标机器sftp连接配置 ----  server可以是require路径,将配置不放在项目里
        server: {
          host: '1237.0.0.1',
          port: '9999',
          username: 'usrname',
          password: 'password',
        }
    },
    callback
]
endAction: [
    modulePath | function,
    options
]

Note: module需要package.json加上依赖

presets

presets: [
    'wefe-fix-splitchunk',
    "wefe-fix-vue",
    'wefe-fix-sence',
    'wefe-fix-babel',
    'wefe-fix-eslint',
]

Note: 个性化插件需要package.json加上依赖

baseConfig

baseConfig: {
    cCategory: false, // 关闭文件分类
    cExt: false, // 关闭文件扩展命名
    page: 'pages', // 多页分析路径 -> src/pages
    entry: 'main', // 多页入口分析 -> src/pages/index/main.js
    dist: path.resolve(`${process.cwd()}/dist/publish/web/`), // 编译路径
    publicPath: '/dist/publish/web' // 资源路径
}

License MIT

Readme

Keywords

Package Sidebar

Install

npm i wefe

Weekly Downloads

6

Version

1.4.14

License

MIT

Unpacked Size

184 kB

Total Files

74

Last publish

Collaborators

  • miaolion