npm

Check out our latest tech talk, "JavaScript Supply Chain Security" presented by VP of Security, Adam Baldwin.Watch it here »

doly-cli

0.5.0 • Public • Published

doly-cli

doly-cli 是一个包含 init dev build 的命令行工具,参考了 react-dev-utils,create-react-app,roadhog, umi等优秀工具。

  • 📦 开箱即用的 react 应用开发工具,内置 css-modules、babel、less、postcss、HMR 等
  • 🚨 create-react-app 的体验
  • 🐠 扩展 webpack 配置
  • ✂️ mock
  • ✨ 支持开发和构建不同 env 环境配置
  • 🍰 支持html/js/css/image构建自定义目录

Contents

快速开始

# 全局安装
npm install doly-cli -g
 
# 查看版本
doly -v
 
# 初始化项目脚手架
doly init
 
# 本地开发。代码编译并启动本地服务,env 默认 development 环境
doly dev [env]
 
# 打包。env 默认 production 环境
doly build [env]
 

Mock

doly dev 支持 mock 功能,默认文件 mocker/index.js 中进行配置。参考 mocker-api

示例:

module.exports = {
  // 支持值为 Object 和 Array
  'GET /api/users': { users: [1,2] },
 
  // GET POST 可省略
  '/api/users/1': { id: 1 },
 
  // 支持自定义函数,API 参考 express@4
  'POST /api/users/create': (req, res) => { res.end('OK'); },
};

使用public目录

我们约定 public 目录下的文件会在 devbuild 时被自动 copy 到输出目录(默认是 ./dist)下。所以可以在这里存放 favicon, iconfont, html里引用的图片等。

不同环境配置

通过 env 实现,env 除默认 developmentproduction 外,可以任意配置。

doly dev [env] 本地开发中可以运行不同环境配置,默认 envdevelopment

doly build [env]打包不同环境配置,默认 envproduction

# 本地开发读取生产环境配置
doly dev production
 
# 本地开发读取测试环境配置
doly dev test
 
# 打包开发环境配置
doly build development
 
# 打包测试环境配置
doly build test

即运行 env 对应环境配置项和默认配置项的合并配置。

doly.config.js

module.exports = {
  define: {
    APIURL: 'https://dev.example.com/'
  },
  env: {
    test: {
      define: {
        APIURL: 'https://test.example.com/'
      }
    },
    sit: {
      define: {
        APIURL: 'https://sit.example.com/'
      }
    },
    production: {
      define: {
        APIURL: 'https://prod.example.com/'
      }
    }
  }
}

配置

doly 封装了 webpack 部分功能。如需配置,在项目根目录新建 doly.config.js 完成。如果是基于 init 的项目目录结构,并且没有资源文件的目录规则要求,可以零配置进行开发。

示例:

module.exports = {
  ...
}

索引:

entry

指定 webpack 入口文件,支持 glob 格式。默认:

entry: 'src/app.js'

如果是多页面多入口,请使用对象模式,并配置 optimization的splitChunks

entry: {
  bar: 'src/bar.js',
  foo: 'src/foo.js'
}

又比如你希望把 src/pages 的文件作为入口。可以这样配:

entry: 'src/pages/*.js'

outputPath

配置 webpack 的 output.publicPath 属性。默认:

outputPath: 'dist'

zip

配置构建完成后生成 zip 文件,相对于当前项目根目录

示例:

zip: 'build/project.zip'

outputFilename

配置 webpack 的 output.filename 属性。如果设置该值,hash配置对该项无效,需自己配置文件名 hash。默认:

outputFilename: '[name].[chunkhash:8].js'

也可以自定义目录

outputFilename: 'res/i/[name].[chunkhash:8].js'

outputChunkFilename

配置 webpack 的 output.chunkFilename 属性。如果设置该值,hash配置对该项无效,需自己配置文件名 hash。默认:

chunkFilename: '[name].[chunkhash:8].chunk.js'

也可以自定义目录

chunkFilename: 'res/i/[name].[chunkhash:8].chunk.js'

publicPath

配置 webpack 的 output.publicPath 属性。默认:

publicPath: '/'

hash

配置让构建资源文件名带 hash,通常会和 manifest 配合使用。如果单独设置了 outputFilename outputChunkFilename css.filename css.chunkFilename 则需要单独指定filename 的hash。默认:

hash: true

ignoreMomentLocale

忽略moment 的 locale 文件,用于减少尺寸。默认:

ignoreMomentLocale: false

注意开启后,可能导致antd的日期组件月份显示英文

manifest

配置后会生成 manifest.json,option 传给 webpack-manifest-plugin。默认为空。

示例:

manifest: {
  basePath: 'http://www.example.com/'
},

html

配置页面信息,option 传给 html-webpack-plugin。默认:

html: [{
  template:'src/index.html', // 指定要打包的html路径和文件名
  filename: 'index.html', // 指定输出路径和文件名
}]

image

配置图片 url-loader。默认:

image: {
  outputPath: 'images', // 图片输出地址,默认 images
  name: '[name].[hash:8].[ext]', // 文件名
  limit: 1024*8 // 8kb内的图片转为base64
}

也可以自定义目录

image: {
  outputPath: 'res/i', // 图片输出地址,默认 images
  name: '[name].[hash:8].[ext]', // 文件名
  limit: 1024*8 // 8kb内的图片转为base64
}

css

配置 mini-css-extract-plugin。如果设置 filenamehash配置对该项无效,需自己配置文件名 hash。如果 cssInlinetrue,该配置无效。默认:

css: {
  filename: '[name].[contenthash:8].css',
  chunkFilename: '[name].[contenthash:8].chunk.css'
}

也可以自定义目录

css: {
  filename: 'res/c/[name].[contenthash:8].css',
  chunkFilename: 'res/c/[name].[contenthash:8].chunk.css'
}

cssInline

样式包含js中,用style进行加载。默认为 false

disableCSSModules

禁用 CSS Modules。默认 false

disableCSSSourceMap

禁用 CSS 的 SourceMap 生成。默认 false

replace

配置 string-replace-loader,替换js/jsx中的文本。例如fis的图片资源定位符 __uri,资源路径需改为相对路径。

示例:

replace: {
  search: '__uri',
  replace: 'require',
  flags: 'g'
},

define

通过 webpackDefinePlugin 传递给代码,值会自动做 JSON.stringify 处理。

示例:

define: {
  APIURL: 'http://www.example.com/'
}

externals

配置 webpack 的externals属性。

例如,配置 react 和 react-dom 不打入代码

html:

<script src='https://unpkg.com/react@16.8.1/umd/react.production.min.js'></script>
<script src='https://unpkg.com/react-dom@16.8.1/umd/react-dom.production.min.js'></script>

doly.config.js 中:

externals: {
  react: 'window.React',
  react-dom: 'window.ReactDOM'
}

extensions

配置 webpack 的 resolve.extensions 属性。自动解析确定的扩展。默认值为:'web.mjs', 'mjs', 'web.js', 'js', 'web.ts', 'ts', 'web.tsx', 'tsx', 'json', 'web.jsx','jsx'。配置之后会进行合并。

alias

配置 webpack 的 resolve.alias 属性。

copy

定义需要单纯做复制的文件列表,格式为数组,项的格式参考 copy-webpack-plugin 的配置。

browserslist

配置 browserslist,同时作用于 babel-preset-envautoprefixer。默认:

browserslist: [
  '> 1%',
  'last 4 versions',
  'Firefox ESR',
  'not ie < 9',
]

optimization

配置 webpack 的 optimization。默认配置了minimize/minimizer,配置之后会进行合并。如果需要进行代码拆分可以配置 splitChunks

devtool

配置 webpack 的 devtool 属性。默认区分开发和生产环境:

production 环境:

devtool: 'cheap-module-source-map'

production 环境:

devtool: undefined

devServer

配置 webpack-dev-server

mockFile

配置mock文件。默认:

mockFile: 'mocker/index.js'

mocker/index.js 示例

export default {
  // 支持值为 Object 和 Array
  'GET /api/users': { users: [1,2] },
 
  // GET POST 可省略
  '/api/users/1': { id: 1 },
 
  // 支持自定义函数,API 参考 express@4
  'POST /api/users/create': (req, res) => { res.end('OK'); },
};

proxy

本地服务代理配置,参考webpackdevserver.proxy

示例:

proxy: {
    '/app': {
        target: 'http://xxx/',
        changeOrigin: true,
    },
},

env

不同环境配置,如果build不是production,webpack mode不会设置为production。

本地开发使用 doly dev [env]env 默认 development。

打包使用 doly build [env]env 默认 production。

扩展配置

扩展配置一样是在 doly.config.js 中进行配置, 如果有依赖扩展插件,需在项目安装插件

extraBabelPlugins

扩展 babel-loaderplugins

示例

项目中只引入 antd-mobile 某个组件,可扩展 babel-plugin-import 插件。

  • 安装 babel-plugin-import
npm install babel-plugin-import --save-dev
  • doly.config.js 中配置
extraBabelPlugins: [['import', { libraryName: 'antd-mobile', style: true }]]

然后只需从 antd-mobile 引入模块即可,无需单独引入样式。

// babel-plugin-import 会帮助你加载 JS 和 CSS
import { DatePicker } from 'antd-mobile';

extraBabelPresets

扩展 babel-loaderpresets

extraPostCSSPlugins

扩展 postcss-loaderplugins

示例

npm install postcss-pxtorem --save-dev
extraPostCSSPlugins: [
    require('postcss-pxtorem')({
      rootValue: 75,
      unitPrecision: 5,
      propList: ['*', '!border*'],
      selectorBlackList: [],
      replace: true,
      mediaQuery: false,
      minPixelValue: 12
    })
  ]

如何兼容IE

IE9/10/11

  1. 入口文件顶部,引入 @babel/polyfill
  2. doly.config.js 关闭开发服务的模块热替换,需手动刷新浏览器。建议在测试IE兼容时再关闭
  3. doly.config.js 配置 browserslist

安装 @babel/polyfill

npm install @babel/polyfill --save

在入口文件 app.js 顶部引入

import '@babel/polyfill'

doly.config.js 配置:

devServer: {
  hot: false
}

Keywords

none

install

npm i doly-cli

Downloadsweekly downloads

175

version

0.5.0

license

MIT

last publish

collaborators

  • avatar
  • avatar
Report a vulnerability