1.0.0 • Published 5 years ago

@wefed/server v1.0.0

Weekly downloads
-
License
MIT
Repository
-
Last release
5 years ago

wefed

We are the front end engineer!

node version npm download NPM count License

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

它提供了如下基本功能:

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

安装启动

安装Node

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

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

$ node -v
v8.11.2

安装wefed

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

npm install -g wefed

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

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

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

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

$ wefed help

Usage: wefed <command> [options]

Commands:

    init                       生产模版文件
    dll                        dll资源编译
    server                     本地启动服务
    build                      输出编译文件
    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)
    -d, --dll [dll]               是否开启使用dll预编译 (default: false)
    -l, --lighthouse [lighthouse] 是否在build时启用lighthouse (default: false)
    -v, --version                 版本
    -V, --version                 output the version number
    -h, --help                    output usage information

脚手架

wefed init [template] [projectName] [projectPath]

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

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

本地server开发:

wefed server

本地编译文件输出:

wefed build

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

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

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

链式配置化

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

Note: wefed.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
]
endAction: [
    modulePath | function,
    options
]

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

presets

presets: [
    '@wefed/preset-optimization',
    "@wefed/preset-vue",
    '@wefed/preset-scene',
    '@wefed/preset-babel',
    '@wefed/preset-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