webpack集成開發環境wci-build

wci-build

基於react1六、react-router四、redux的webpack構建工具，開發者能夠選擇集成設計類開發框架（例如：antd），可用於開發大型網站、管理系統等，功能包含但不限於以下：

• 集成最新react1六、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
複製代碼

• 建立項目目錄

app-name
├── README.md
├── node_modules
├── package.json
├── .gitignore
└── app
    └── assets
    └── script
        └── actions
        └── componets
        └── containers
        └── reducers
        └── util
        └── Home.js
        └── home.less
    └── styles
    └── index.js
    └── index.tpl.html
複製代碼

• 新建.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",
  "name": "wciapp",
  "libs": [
    "react",
    "react-dom",
    "axios",
    "classnames",
    "prop-types",
    "react-redux",
    "react-router-dom",
    "redux",
    "redux-thunk"
  ],
  "dev": {
    "port": 8031,
    "src": "app",
    "api": "",
    "module": {},
    "is_eslint": false
  },
  "test": {
    "module": {},
    "api": ""
  },
  "prod": {
    "port": 9031,
    "src": "dist",
    "module": {},
    "api": ""
  }
}
複製代碼

• 修改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  // 生產環境
複製代碼