Nietzsche's Preposterous Moustache

    vcmqj

    0.1.30 • Public • Published

    vcmqj

    名气家前端构建脚手架,webpack4,由于项目仅使用了 vue 框架,所以仅对 vue 进行了处理

    安装

    npm i vcmqj -g
    npm i vcmqj -D

    目录配置

    ├─.babelrc //babel配置
    ├─.eslintrc.js //eslint配置
    ├─.gitignore
    ├─README.md
    ├─index.html  //通用模板
    ├─package.json
    ├─static  // 不需要变异的静态资源
    ├─src
    |  ├─index.css
    |  ├─index.js  //入口
    |  ├─widgets  //业务组建
    |  ├─views    //page组件
    |  ├─router   //路由
    |  ├─components  //通用组件
    ├─conf
    |  ├─conf.js  //不分环境的公共配置,启动必会运行的配置
    |  ├─proxy.js  //mocker数据请求代理
    |  ├─mocker //mocker数据
    |  ├─env   //每个人可根据各个环境进行不同配置

    conf

    可自定义使用 webpack 配置,domains 与 nomocker 不是 webpack 配置

    // 开发环境
    const webpack = require('webpack');
    
    module.exports = {
      domains: {
        test1: 'http://test1.xxx.com/', //根据命令:test1所执行的文件
      },
      devServer: {
        proxy: {
          '/api': {
            target: 'http://xxxx.api.com', //没有加:指定代理时,默认代理
            changeOrigin: true,
          },
        },
      },
      nomocker: true, //是否启用模拟数据
      output: {
        publicPath: '/static',
      },
      plugins: [
        new webpack.DefinePlugin({
          'process.env': {
            NODE_ENV: JSON.stringify(process.env.NODE_ENV),
          },
        }),
      ],
    };
    
    // 生产环境
    // 生产环境的静态资源跟运维配置有关,pablicpath需要跟服务器域名对应起来,
    var webpack = require('webpack');
    const CopyPlugin = require('mqj/plugins/copy');
    const CleanWebpackPlugin = require('clean-webpack-plugin');
    const CopyWebpackPlugin = require('copy-webpack-plugin');
    const path = require('path');
    
    function resolve(dir) {
      return path.join(process.cwd(), dir);
    }
    
    module.exports = {
      output: {
        publicPath: '//xxx.com/目录',
      },
      plugins: [
        // 清除dist目录和output目录
        new CleanWebpackPlugin([resolve('output'), resolve('dist')], {
          allowExternal: true,
        }),
    
        // 用作部署使用,生成output/static和output/views,便于运维部署
        new CopyPlugin([
          {
            from: 'dist',
            to: 'output/static',
            include: 'dist/目录',
          },
          {
            from: 'dist',
            to: 'output/views',
            exclude: 'dist/目录',
          },
        ]),
    
        new CopyWebpackPlugin([
          //---这里将static文件输出到特定的文件夹
          {
            from: path.resolve(__dirname, '../../static'),
            to: path.resolve('dist/目录', 'assets'),
            ignore: ['.*'],
          },
        ]),
      ],
    };

    使用方式

    // 创建基本项目
    vcmqj -p [文件名]
    
    // 开发环境
    vcmqj -d [conf/env文件夹js文件名] :[运行文件名下的指定的domain]
    vcmqj -d dev :test1  //即执行的是conf/env/dev.js下的test1代理
    
    // 生产环境
    vcmqj -b [conf/env文件夹js文件名]
    vcmqj -b production //即执行的是conf/env/production.js
    vcmqj -b production -a //开启分析

    注意

    1.7 版本之前不支持多个代理,即 1.6 的 domains,每个属性为字符串,只能代理一个域名,1.7 之后字符串改为了相对应的代理,可多个代理, 如:

      domains: {
        test1:{
          '/api':'http://test1.xxx.com'
        }
      },
    

    Keywords

    none

    Install

    npm i vcmqj

    DownloadsWeekly Downloads

    13

    Version

    0.1.30

    License

    ISC

    Unpacked Size

    42.8 kB

    Total Files

    34

    Last publish

    Collaborators

    • demo-person2