Skip to content

cyber-tools/spa-cli

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

89 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

@cyber-tools/spa-cli

基于webpack的web项目集成开发环境,使用npm进行管理升级,让web项目开发简单化,规范化

概览

  1. Install
  2. Introduction
  3. proxy代理数据
  4. mock模拟数
  5. project.config.js
  6. Commands

Install

可以作为开发依赖安装:

npm install @cyber-tools/spa-cli --save-dev

也可以全局安装:

npm install @cyber-tools/spa-cli -g

Introduction

cyber-spa用于快速构筑项目(不需要自己配置webpack),只需要覆盖少量配置即进行快速开发,后期依赖npm进行升级,尽可能保证加脚手架的可维护性

  • 配置项通过webpack-merge进行合并
  • 集成了webpack等大部分开发依赖
  • 通过npm进行维护升级

proxy代理数据

在proxy文件夹中的所有问文件均会在开发模式下运行 代理效果请参考[http-proxy-middleware](https://www.npmjs.com/package/http-proxy-middleware)的使用文档 使用示例:
module.exports={
  "/test1":{
    target:"",
    changeOrigin:true
  },
  "/test2":{
    target:"",
    changeOrigin:true
  },
};

mock模拟数据

在mock文件夹中的所有问文件均会在开发模式下运行

返回模拟数据具体的使用请参考mocker-api的使用文档

使用示例:

module.exports={
  "GET /test1":(request,response)=>{
    response.send({data:90909});
  },
  "POST /test2":(request,response)=>{
    response.send({data:"kjn"});
  }
};

plugins项目外挂

在plugins文件夹中的所有js文件均会加载在index.js入口文件之前,可以在这些文件中写一些脚本,这些脚本会随着项目的运行一起加载,这些文件无论在生产环境还是测试环境都会被加载,可以使用process.env.NODE_ENV来进行区分

babel.config.js

该文件用来覆盖默认的babel配置

默认的babel.config内容入下所示:

module.exports = {
  presets: [
    require.resolve("@babel/preset-env"),
    require.resolve("@babel/preset-react")
  ],
  plugins: [
    //装饰器配置使用旧版的stage0
    [require.resolve("@babel/plugin-proposal-decorators"), { legacy: true }],
    //当装饰器配置为legacy:true时需要松散模式
    [require.resolve("@babel/plugin-proposal-class-properties"), { loose: true }],
    [require.resolve("@babel/plugin-transform-runtime")],
    [require.resolve("babel-plugin-import"), {
      libraryName: "antd",
      libraryDirectory: "es",
      style: true
    }]
  ]
}

project.config.js

在项目文件中新建project.config.js来复写构筑工具的默认配置,配置项参考webpack文档

webpackConfig选项中禁止使用entry和output选项

示例文件:

module.exports={
  devServer:{
    port:9000,
    useLocalIp:true
  },
  webpackConfig:{
    
  }
};

Commands

开发指令:

cyber-spa dev

打包指令:

cyber-spa  build

About

单页应用cyber-spa的引导及构建脚本

Topics

Resources

Stars

Watchers

Forks

Packages

No packages published