11.0.0 • Published 3 years ago

@cyber-tools/spa-build-tools v11.0.0

Weekly downloads
3
License
ISC
Repository
-
Last release
3 years ago
  1. Install
  2. Introduction
  3. proxy代理数据
  4. mock模拟数
  5. project.config.js
  6. Commands

可以作为开发依赖安装:

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

也可以全局安装:

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

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

  • 配置项通过webpack-merge进行合并
  • 集成了webpack等大部分开发依赖
  • 通过npm进行维护升级
module.exports={
  "/test1":{
    target:"",
    changeOrigin:true
  },
  "/test2":{
    target:"",
    changeOrigin:true
  },
};

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

使用示例:

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

默认的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来复写构筑工具的默认配置,配置项参考webpack文档

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

示例文件:

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

开发指令:

cyber-spa dev

打包指令:

cyber-spa  build