配置

说明

从 v2.0 版本起来，主要是通过项目路径下的 legoflow.json / legolfow.yaml / legoflow.js 作为配置文件，默认使用 legoflow.yaml。

公共参数

name

项目名称，e.g.

name: test

version

创建项目使用的 LegoFlow 客户端或 CLI 版本号，e.g.

version: app@2.0.0

type

创建的项目类型，e.g.

type: vue

REM

是否使用 REM 适配。启动该选项后，_img.scss 会以 REM 为单位，e.g.

REM: true

ES.Next

是否对 JS 进行 ES.Next 语法的编译，默认值为 true, e.g.

ES.Next: true

alias

Webpack 别名配置，参考文档，e.g.

alias:
  axios: ./node_modules/axios
  jquery: ./src/assets/jquery.min.js

global

Webpack 全局对象，参考文档，e.g.

global:
  $: jquery
  jquery: jquery
  jQuery: jquery

externals

Webpack externals，参考文档，e.g.

externals:
  vue: Vue

includeModules

Webpack modules，默认已加入项目路径下的 node_modules，参考文档，e.g.

includeModules:
  - ./test_node_modules

ESLint

是否启动 ESLint，启动后若项目下没有 ESLint 配置文件的话，JS 部分默认会以 Standard 作为规范，vue 文件部分会以 plugin:vue/essential。e.g.

ESLint: true

默认配置：

module.exports = {
  "parserOptions": {
    "parser": "babel-eslint"
  },
  "extends": [
    "standard",
    "plugin:vue/essential"
  ],
  "plugins": [
    "vue"
  ]
}

env

配置各种环境不一样的参数，e.g.

env:
  dev-test:
    alias:
      axios: ./src/assets/axios.min.js
  preview:
    workflow.build:
      html.resourcesDomain: https://preview.com
  test:
    workflow.build:
      html.resourcesDomain: https://test.com
  production:
    workflow.build:
      html.resourcesDomain: https://production.com

entry

一般情况下，webapck entry 是通过内置策略自动获取的，但你也可以通过该属性进行指定。e.g.

entry:
  - ./src/main.ts
  - ./src/test.js

# 或者

entry:
  main: ./src/main.ts
  test: ./src/test.js

mode

设置 Engine 模式。e.g.

mode: webpack

webpack

当设置 Engine 模式为 webpack 的时候，以下属性生效，主要用来设置一些 Webpack 插件的配置。

以下参数请配置在 webpack 内使用，e.g.

webpack:
  imageQuality: 70

imageQuality

构建工作流，处理图片资源时，会进行图片压缩处理质量，默认为 90，e.g.

imageQuality: 70

build.sourceMap

构建工作流，同时生成 Source Map 文件，默认为 false，e.g.

build.sourceMap: true

VueChunkStyle

禁止异步 vue 文件内的 Style 单独打包出样式文件，默认为 true，e.g.

VueChunkStyle: false

include

默认 Webpack loader 对文件的处理都 exclude 排除 node_modules 路径下的模块，而通过该属性可以指定一些模块加入 loader 的处理，例如：ESNext 语法编译等等，e.g.

include:
  esnext:
    - ./node_modules/sdk
  vue:
    - ./node_modules/alert

dll

dll 设置, 可通过命令行工具 cli，执行 lf build:dll 生成 dll 文件，e.g.

dll:
  vendor1:
    - vue
    - vue-router
    - vuex

html

设置 html-webpack-plugin 插件配置，e.g.

html:
  - template: ./src/html/index.html
    filename: index.html
    excludeChunks:
      - test
  - template: ./src/html/test.html
    filename: test.html
    excludeChunks:
      - main

babelModules

设置 babel env 转换模块规范 (详细)，默认值为 commonjs， e.g.

babelModules: false

uglifyOptions

设置 uglifyoptions 配置项 (详细)，e.g.

uglifyOptions:
    keep_fnames: true

dev.https (v2.4.0+)

是否启动 https 模式，e.g.

https: true

build.htmlInject (v2.4.0+)

通过该配置注入 JS / CSS 静态资源，e.g.

build.htmlInject:
  a: 'https://a.com/a.css'
  b: 'https://b.com/b.js',

/* https://a.com/a.css */
html { background: red }

// https://b.com/b.js
console.log('b')

构建前

<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
</head>
<body>
  <!-- @inject/link: a -->
  <!-- @inject/link: b -->

  <!-- @inject/inline: a -->
  <!-- @inject/inline: b -->
</body>
</html>

构建后

<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
</head>
<body>
  <link rel="stylesheet" href="https://a.com/a.css">
  <script src="https://b.com/b.js"></script>

  <style type="text/css">html { background: red }</style>
  <script>console.log('b')</script>
</body>
</html>

build.copy (v2.4.0+)

通过该配置在构建后复制文件或文件夹，e.g.

build.copy:
  a.png: b.png
  assets: assets

构建后，./src/a.png 复制到 ./dist/b.png，./src/assets 复制到 ./dist/assets

bundle.worker (v2.5.0+)

通过该配置可开启打包 WebWorker 文件进依赖链，e.g.

bundle.worker: true

new Worker('./worker.js', { type: 'module' })

开发工作流参数

以下参数配置在 workflow.dev 内，e.g.

workflow.dev:
    env: dev-test

hot.reload

代码热更新，e.g.

hot.reload: true

watch.reload

监听额外的文件夹，变动刷新浏览器，e.g.

watch.reload:
    - ./src/test/**/*

user.args

用户参数，根据用户名注入 Webpack define 插件变量， e.g.

# * 全部用户在 JS 文件中变量 process.args.token4Common 编译为 abc
# 用户为 test1，在 JS 文件中变量 process.args.token4User 编译为 123
# 用户为 test2，在 JS 文件中变量 process.args.token4User 编译为 321
user.args:
  *:
    token4Common: abc
  test1:
    token4User: 123
  test2:
    token4User: 321

env

开发工作流指向的环境参数，e.g.

env: dev-test

proxy

Webpack 代理，参考文档，e.g.

proxy:
  /api:
    target: http://xxx.com
    changeOrigin: true

shell

需要执行的 shell 脚本文件，e.g.

shell: ./shell/dev.js

onlyRunShell

否仅仅执行 Shell 脚本文件，e.g.

onlyRunShell: true

构建工作流参数

以下参数配置在 workflow.build 内，e.g.

workflow.build:
  env: preview

publicPath

Webpack output.publicPath 配置，参考文档，e.g.

publicPath: https://legoflow.com

html.resourcesDomain

类型于 1.x 版本 assets，构建时候对 html 文件引入的资源加入主域，e.g.

# 例如：<script src="./js/main.js"></script>
# 输出：<script src="https://legox.org/js/main.js"></script>
html.resourcesDomain: https://legox.org

css.resourcesDomain

类型于 1.x 版本 assets.css，构建时候对 css 文件引入的资源加入主域，e.g.

# 例如：background-image: ( ../img/icon.png )
# 输出：background-image: ( https://legox.org/img/icon.png )
css.resourcesDomain: https://legox.org

cache

对资源生成哈希值 (hash) / 时间戳 (timestamp) / 版本号 (version) / 无 ( '' )，e.g.

# 哈希值：<script src="./js/main.js?h=aslm28u12mk2"></script>
# 时间戳：<script src="./js/main.js?t=1523518772795"></script>
# 版本号：<script src="./js/main.js?v=0.0.1"></script>
# 无：<script src="./js/main.js"></script>
cache: version

user.args

同理开发工作流 user.args 参数，e.g.

user.args:
  *:
    token4Common: abc
  test1:
    token4User: 123
  test2:
    token4User: 321

env

构建工作流指向的环境参数，e.g.

env: preview

shell

需要执行的 shell 脚本文件，e.g.

shell: ./shell/build.js

onlyRunShell

否仅仅执行 Shell 脚本文件，e.g.

onlyRunShell: true

output.webpackStats

是否构建出 webpack stats.json，有助于分析模块打包占比，e.g.

output.webpackStats: true

分析网站：webpack analyse、webpack chart

noUglifyJs

构建出来的 JS 文件，是否不需要混淆，e.g.

noUglifyJs: true

Schema

{
  name: String,
  version: String,
  type: String,
  REM: Boolean,
  'ES.Next': Boolean,
  ESLint: Boolean,
  alias: Object,
  global: Object,
  externals: Object,
  env: Object,
  includeModules: Array,
  mode: String,
  friendlyErrors: Boolean,
  webpack: {
    imageQuality: Number,
    html: Object,
    dll: Array,
    include: {
      esnext: Array,
      vue: Array
    },
    babelModules: String,
    uglifyOptions: Object,
    VueChunkStyle: Boolean,
    'sass.globalResources': Array,
    'dev.https': Boolean,
    'build.sourceMap': Boolean,
    'build.html.inject': Object,
    'build.copy': Object
  },
  'workflow.dev': {
    env: String,
    'hot.reload': Boolean,
    'watch.reload': Array,
    'user.args': Object,
    proxy: Object,
    shell: String,
    onlyRunShell: Boolean
  },
  'workflow.build': {
    publicPath: String,
    'html.resourcesDomain': String,
    'css.resourcesDomain': String,
    'bundle.limitResourcesSize': Number,
    cache: String,
    'user.args': String,
    env: String,
    shell: String,
    onlyRunShell: Boolean,
    'output.webpackStats': Boolean
  }
}

# 配置

# 说明

# 公共参数

# name

# version

# type

# REM

# ES.Next

# alias

# global

# externals

# includeModules

# ESLint

# env

# entry

# mode

# webpack

# imageQuality

# build.sourceMap

# VueChunkStyle

# include

# dll

# html

# babelModules

# uglifyOptions

# dev.https (v2.4.0+)

# build.htmlInject (v2.4.0+)

# 构建前

# 构建后

# build.copy (v2.4.0+)

# bundle.worker (v2.5.0+)

# 开发工作流参数

# hot.reload

# watch.reload

# user.args

# env

# proxy

# shell

# onlyRunShell

# 构建工作流参数

# publicPath

# html.resourcesDomain

# css.resourcesDomain

# cache

# user.args

# env

# shell

# onlyRunShell

# output.webpackStats

# noUglifyJs

# Schema

配置

说明

公共参数

name

version

type

REM

ES.Next

alias

global

externals

includeModules

ESLint

env

entry

mode

webpack

imageQuality

build.sourceMap

VueChunkStyle

include

dll

html

babelModules

uglifyOptions

dev.https (v2.4.0+)

build.htmlInject (v2.4.0+)

构建前

构建后

build.copy (v2.4.0+)

bundle.worker (v2.5.0+)

开发工作流参数

hot.reload

watch.reload

user.args

env

proxy

shell

onlyRunShell

构建工作流参数

publicPath

html.resourcesDomain

css.resourcesDomain

cache

user.args

env

shell

onlyRunShell

output.webpackStats

noUglifyJs

Schema