builder-abc v2.0.0-alpha-202302241842

builder-abc

一个基于webpack的构建器，用户无需关心webpack配置，通过简单配置即可进行本地调试和线上打包

node >= 7.6.0

默认支持

• 支持 less，postcss，autoprefixer
• 支持 ts
• 支持 react
• 支持 es6 语法
• 支持 hmr
• 支持接口代理
• 基于 koa2

安装

## 安装 yarn
npm i -g yarn

## 安装 abc 工具，一个组件生成和构建工具
yarn add global builder-abc

基本配置

• 本地开发调试 - 启动调式服务器，启动的服务器默认拥有 hmr 功能

abc dev

• 代码上线阶段 - 执行代码构建

abc build

• 代码babel转义

abc babel

• 发布上线

abc publish

为了方便支持动态配置项，可使用 webpack.config.js 配置文件，配置文件优先级 webpack.config.js > .abcrc > abc.json, 完整的配置项可以参考如下的 （.abcrc） 文件说明

高阶配置 - 完整的配置文件（.abcrc）说明，必须是一个标准的JSON格式文件

{
  "port": 8080, // 服务器端口配置，默认 8080
  "entry": {}, // 入口文件配置，一般需要覆盖配置，比如：entry: { app: './index.js' }
  "output": {}, // 输出配置，默认：{ path: './build', filename: '[name].js' }
  "rules": [], // loader 配置，配置方式：[{ test: /\.js$/, use: ['babel'] }]
  "plugins": [], // 插件配置
  "alias": [], // 别名配置，配置方式：{ component: 'xx/xx/component' }
  "babelOptions": {}, // babel 选项配置
  "isExtractCss": true, // 是否抽离 css 成单独的文件，默认抽离成单独的文件
  "htmlTemplateUrl": "", // 页面启动页默认配置，一般需要覆盖配置
  "devtool": "eval-source-map", // soucemap 配置，开发模式下使用，默认：eval-source-map
  "proxy": {}, // 代理设置，比如：{ '/api': 'http://www.aliyun.com/mocks', 'example/:id': (params) => return { target: 'http://localhost:8080/', logs: true } }
  "externals": { // 默认不打包 react, react-dom, @ali/wind, jquery
    "react": {
      "root": "React",
      "commonjs2": "react",
      "commonjs": "react",
      "amd": "react"
    },
    "react-dom": {
      "root": "ReactDOM",
      "commonjs2": "react-dom",
      "commonjs": "react-dom",
      "amd": "react-dom"
    },
    "@ali/wind": {
      "root": "wind",
      "commonjs2": "@ali/wind",
      "commonjs": "@ali/wind",
      "amd": "@ali/wind"
    },
    "jquery": {
      "root": "jQuery",
      "commonjs2": "jquery",
      "commonjs": "jquery",
      "amd": "jquery"
    }
  }
}

一些典型的配置

• 指定入口和模板路径，以及设置代理

{
  "entry": {
    "app": "./src/index.js"
  },
  "htmlTemplateUrl": "./index.html",
  "proxy": {
    "/api": "http://www.aliyun.com/mocks"
  }
}

常见问题

• libpng issues Installing on some versions of OSX may raise errors with a missing libpng dependency:

Module build failed: Error: dyld: Library not loaded: /usr/local/opt/libpng/lib/libpng16.16.dylib

This can be remedied by installing the newest version of libpng with homebrew:

brew install libpng