wci-build
A webpack scaffold
Last updated 2 months ago by jasonlive .
MIT · Repository · Bugs · Original npm · Tarball
$ cnpm install wci-build 
SYNC missed versions from official npm registry.

wci-build

基于react16、react-router4、redux的webpack构建工具,开发者可以选择集成设计类开发框架(例如:antd),可用于开发大型网站、管理系统等,功能包含但不限于如下:
  • 集成最新react16、react-router4
  • 支持css预编译、模块化,集成less、postcss兼容各个版本浏览器(IE9以上)
  • 支持集成蚂蚁金服antd、antd-mobile,支持自定义样式,支持antd动态加载
  • 支持开发环境热更新、支持模块化API接口、支持mac、window双系统开发
  • 支持测试、生产代码自动添加版本号,支持代码合并、压缩,支持第三方库抽离,支持css代码抽离
  • 支持开发环境IP地址、端口可配置、后端API接口可配置
  • 支持三层eslint校验(1.开发工具娇艳 2.代码打包校验 3.git校验)

安装

npm install wci-build --save-dev

更新

npm update wci-build

使用

可以直接使用wci-cli脚手架直接生成wci项目,单独使用wci-build需要做以下配置

  • 安装依赖
npm install react react-dom react-redux react-router-dom redux redux-thunk --save-dev
  • 创建项目目录
myapp
├── app // 项目业务代码
│   ├── assets // 静态文件目录(图片、字体等)
│   ├── script // js代码目录
│   │   ├── actions // redux action目录
│   │   ├── componets // react 无状态组件目录
│   │   ├── containers // react 业务代码
│   │   ├── reducers // redux reducer目录
│   │   ├── util // 工具包目录
│   │   │   ├── theme.js // antd自定义样式文件
│   │   ├── Home.js // 首页
│   │   ├── home.less // 首页样式
│   ├── styles // 全局样式目录
│   ├── index.js // 项目入口文件
│   ├── index.tpl.html // 项目html模版
├── node_modules // 依赖包目录
├── .babelrc // babel配置文件
├── .eslintrc // eslint代码校验配置文件
├── .gitignore
├── package.json
├── README.md
├── wci.json // wci项目配置文件(主要配置一些开发、测试、生产环境的信息)
└── webpack.js // webpack自定义配置文件
  • 新建.babelrc|.eslintrc文件

.babelrc

{
  "presets": [
    "es2015-ie",
    "react",
    "stage-0"
  ],
  "plugins": [
    "transform-decorators-legacy"
  ]
}

.eslintrc

{
  "extends": "airbnb",
  "parser": "babel-eslint",
  "env": {
    "browser": true,
    "node": true,
    "mocha": true
  },
  "globals": {
    "Babel": true,
    "React": true
  },
  "plugins": [
    "react"
  ],
  "rules": {
    "import/no-extraneous-dependencies": "off",
    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
    "global-require": "off",
    "linebreak-style": "off",
    "no-underscore-dangle": "off",
  }
}
  • 新建wci.json文件
{
  "index": "app/index.js",
  "hostname": "127.0.0.1",
  "dev": {
    "port": 8031,
    "src": "app",
    "is_eslint": false,
    "modules": {
      "module1": {
        "host": "",
        "path": ""
      }
    }
  },
  "test": {
    "port": 9031,
    "src": "test",
    "modules": {
      "module1": {
        "host": "",
        "path": ""
      }
    }
  },
  "prod": {
    "port": 9031,
    "src": "dist",
    "modules": {
      "module1": {
        "host": "",
        "path": ""
      }
    }
  }
}
  • 修改package.json运行脚本
"scripts": {
    "start": "wci-build run start",
    "test": "wci-build run test",
    "dist": "wci-build run dist"
  },

运行

npm run start // 开发环境
npm run test  // 测试环境
npm run dist  // 生产环境
Maintainers (1)
Downloads
Today 0
This Week 17
This Month 18
Last Day 1
Last Week 1
Last Month 58
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |