1.1.2 • Published 5 months ago

doly-cli v1.1.2

Weekly downloads
4
License
MIT
Repository
github
Last release
5 months ago

doly-cli

doly-cli 是一个包含 init dev build 的命令行工具,参考了 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 = {
  ...
}

索引:

mode

webpackmode,除了 production 环境外,其他环境默认为 development

支持设置其他环境使用 production,例如一个项目需要部署 sandboxproduction 环境,同时又有不同自定义配置。

context

基础目录,相对当前执行目录的路径,用于从配置中解析入口起点和 loader。默认:

'src'

entry

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

entry: 'src/app.js';

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

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

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

entry: 'src/pages/*.js';

outputPath

配置 webpackoutput.publicPath 属性。默认:

outputPath: 'dist';

zip

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

示例:

zip: 'build/project.zip';

outputFilename

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

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

也可以自定义目录

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

outputChunkFilename

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

outputChunkFilename: '[name].[chunkhash:8].chunk.js';

也可以自定义目录

outputChunkFilename: 'res/j/[name].[chunkhash:8].chunk.js';

publicPath

配置 webpackoutput.publicPath 属性。默认:

publicPath: '/';

hash

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

hash: true;

ignoreMomentLocale

忽略 momentlocale 文件,用于减少尺寸。默认:

ignoreMomentLocale: false;

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

manifest

配置后会生成 manifest.jsonoption 传给 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'
}

注意开发模式下,如果使用 hash 名称可能导致 HMR 失效

cssInline

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

disableCSSModules

禁用 CSS Modules。默认 false

disableCSSSourceMap

禁用 CSSSourceMap 生成。默认 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

配置 webpackexternals属性。

例如,配置 reactreact-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

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

alias

配置 webpackresolve.alias 属性。

copy

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

browserslist

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

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

transpileDependencies

自定义编译依赖模块。默认情况下只编译 src 目录下文件模块,不会编译 node_modules 下的模块,如果你依赖的第三方模块存在不兼容的新语法,请使用该配置。例如:

transpileDependencies: [
  /node_modules\/react-virtualized-auto-sizer/,
  // 其他需要编译的模块
  // ...
];

PS: 你可能需要运行 npx doly dev production 来确认哪个模块存在不兼容语法。

optimization

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

terserOptions

配置 terser-webpack-pluginterserOptions ,将会和默认配置项递归合并。

如部分场景需要在生产构建显示日志,配置如下:

terserOptions: {
  compress: {
    drop_console: false;
  }
}

devtool

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

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

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

示例:

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

env

不同环境配置,如果 build 不是 productionwebpack mode 默认不设置为production(支持其他环境设置 modeproduction)。

  • 本地开发使用 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

init 的脚手架:simplemobile 支持 IE9,admin 支持 IE11

IE9/10/11

  1. 创建 utils/polyfill.js,引入 core-js/stableregenerator-runtime/runtime
  2. 入口文件添加 utils/polyfill.js
  3. 关闭开发服务的模块热替换,修改需手动刷新。建议在测试 IE 兼容时再关闭

安装 core-jsregenerator-runtime

npm install core-js regenerator-runtime

utils/polyfill.js

import 'core-js/stable';
import 'regenerator-runtime/runtime';

入口文件添加 utils/polyfill.js,并关闭开发服务的模块热替换。

doly.config.js 中配置:

entry: {
  app: ["./src/utils/polyfill", "./src/app.js"]
},

// 调试IE时,热更新无效
devServer: {
  hot: false
}
1.1.1

5 months ago

1.1.0

5 months ago

1.1.2

5 months ago

1.0.1

2 years ago

0.8.7

2 years ago

0.8.6

2 years ago

0.8.5

2 years ago

0.8.4

2 years ago

0.8.3

3 years ago

0.8.2

3 years ago

0.8.1

4 years ago

0.8.0

4 years ago

0.7.10

4 years ago

0.7.9

4 years ago

0.7.8

4 years ago

0.7.7

4 years ago

0.7.6

4 years ago

0.7.5

4 years ago

0.7.4

4 years ago

0.7.3

4 years ago

0.7.2

4 years ago

0.7.1

4 years ago

0.7.0

4 years ago

0.6.6

5 years ago

0.6.5

5 years ago

0.6.4

5 years ago

0.6.3

5 years ago

0.6.2

5 years ago

0.6.1

5 years ago

0.6.0

5 years ago

0.5.0

5 years ago

0.4.0

5 years ago

0.3.11

5 years ago

0.3.10

5 years ago

0.3.9

5 years ago

0.3.8

5 years ago

0.3.7

5 years ago

0.3.6

5 years ago

0.3.5

5 years ago

0.3.4

5 years ago

0.3.3

5 years ago

0.3.2

5 years ago

0.3.1

5 years ago

0.3.0

5 years ago

0.2.0

5 years ago

0.1.16

5 years ago

0.1.15

5 years ago

0.1.14

5 years ago

0.1.13

5 years ago

0.1.12

5 years ago

0.1.11

5 years ago

0.1.10

5 years ago

0.1.9

5 years ago

0.1.8

5 years ago

0.1.7

5 years ago

0.1.6

5 years ago

0.1.5

5 years ago

0.1.4

5 years ago

0.1.3

5 years ago

0.1.2

5 years ago

0.1.1

5 years ago

0.1.0

5 years ago

0.0.0

6 years ago

1.0.0

6 years ago