mido-construct

webpack4 前端框架脚手架

api

version < 1.1.2-beta

construct init 初始化命令

Options:

• -s, 创建目录地址
• -p, --port 端口
• mido-construct init -p 8989 -s 目录

---

version > 1.1.2-beta

mido init 初始化命令

Options:

• -s, 创建目录地址
• -p, --port 端口
• mido-construct init -p 8989 -s 目录

mido dev 开发模式

scripts: {
  "dev": "mido dev mock=dev --port 9001", // 开发环境本地mock数据
    "test": "mido dev mock=test --port 9001", // 测试环境，测试服务器数据
    "pre": "mido dev mock=pre --port 9001", // 线上环境，线上服务器
}

mido build 打包

scripts: {
  "build": "mido build"
}

---

自定义配置项

目录根路径 config/config.js

version > 1.1.5

export default {
    babel: {
 
    },
    webpack: {
 
    },
    proxy: {
    }
}

proxy

exports.proxy = {
    dev: {
        '/api': {
            target: 'http://localhost' // target为空默认为localhost
        },
        '/some': {
            target: 'http://localhost'
        }
    },
    test: {
        '/api': {
            target: 'http://xxx.xxx.com'
        },
        '/some': {
            target: 'http://xxx.xxx:9002'
        }
    },
    pre: {
        '/api': {
            target: 'https://www.alipay.com'
        }
    }
}

• 服务器地址配置：

  • dev 为本地mock数据，数据取自mock文件下的**.mock.js
  • test 为开发环境服务器数据，由框架代理。
  • pre 为线上环境服务器数据，由框架代理。

• Dev下mock数据配置：

  • 根目录下创建mock文件夹
    • mock文件必须为*.mock.js文件

• 可以是数据返回

const some = {
  stat: 'fail'
}
 
module.exports = {
  'GET /some.json': some, 
}

• 也可以是函数

const init = {
  stat: 'ok'
}
 
module.exports = {
  'GET /init.json': function(req, res) {
    res.json({
      stat: 'ok'
    })
  }
}

.babelrc

exports.babel = {
  presets: [],
  plugins: []
}

• babel使用8以上版本
• 框架内集成：
  • presets
    • @babel/preset-env
    • @babel/preset-react
  • plugins
    • @babel/plugin-transform-runtime
    • babel-plugin-syntax-jsx
    • babel-plugin-transform-vue-jsx

webpack

exports.webpack = {
  optimization: {
    splitChunks: {
                cacheGroups: {
                    vendor: { // node_modules内的依赖库
                        chunks: "all",
                        test: /[\\/]node_modules[\\/]/,
                        name: "vendor",
                        minChunks: 1, // 被不同entry引用次数(import),1次的话没必要提取
                        maxInitialRequests: 5,
                        minSize: 0,
                        priority: 100,
                        // enforce: true?
                    },
                    common: { // ‘src/js’ 下的js文件
                        chunks: "all",
                        test: /[\\/]src[\\/]js[\\/]/, // 也可以值文件/[\\/]src[\\/]js[\\/].*\.js/,  
                        name: "common", // 生成文件名，依据output规则
                        minChunks: 2,
                        maxInitialRequests: 5,
                        minSize: 0,
                        priority: 1
                    }
                }
            }
  }
}

• webpack 配置项类似于webpack.config.js