react-builder

react脚手架

基本功能介绍

建议全局模式安装 < 优点: 项目多就不用重复的去每个项目安装脚手架, 全局安装多项目受用 >

window环境
npm install react-builder -g --registry http://npm.tanshenghu.cn

mac环境
sudo npm install react-builder -g --registry http://npm.tanshenghu.cn

可能安装的过程遇到 current user ("nobody") 遇到创建目录等其它权限问题

sudo npm_config_user=root npm --registry http://npm.tanshenghu.cn install react-builder@latest -g

最新的安装方法
npm install @tanshenghu/react-builder -g
或用 cnpm、 yarn 安装速度更快

新建你的`react`项目工程
无需关心、安装webpack,bable等
直接安装项目代码依赖包
并修改package.json里面的"start": "react-builder dev -p 8080"
然后npm start就能启动项目

命令行 常用参数详解
dev 启动本地开发服务
-p 启动本地服务端口号
--https 启用https
-h 本地服务域名
build 编译打包

脚手架默认已经支持，js,jsx,ts,jsx,css,scss,less,stylus,css-module
antd按需打包默认没有集成在里面，需要在外边自己配一下。

其它常用高级用法

自定义一些webpack插件、loader等
在项目根目录新建一个builder.config.js文件
module.exports = {
    chainWebpack(config) {
        
    },
    babelPlugins: [
      [
        "babel-plugin-import",
        { "libraryName": "antd", "libraryDirectory": "lib", "style": true },
        "ant"
      ]
    ],
    plugins: [],
    themeSkins: {
      themeFile: [
        // 针对antd组件主题颜色修改
        path.resolve('./config/theme/antd_skin.less'),
        // 针对自己项目主题皮肤颜色定义
        path.resolve('./config/theme/variables.styl'),
      ]
    },
    builderDone({ stats }) {
      console.log('打包完成...');
    }
}


在项目程序代码中获取环境变量值
process.env.NODE_ENV   // development   /   production


如果需要大量的自定义数据字段，项目根目录新建project.config.json
{
  "hello": "你好，这里是打包数据配置文件",
  "content": "可以在工程代码的process里面取这里的配置数据",
  "templateParameters": { // index.html 模板数据
    meta: {
      author: 'TanShenghu - 福虎'
    },
    title: 'web网站标题'
  }
}
// 项目程序代码取值
process.projectConfig.content   // 可以在工程代码的process里面取这里的配置数据

了解更多高级用法

Call Me

Appreciate