designWidth

designWidth 用来设置设计稿尺寸,关于这一部分的配置说明请见设计稿及尺寸单位这一章节

sourceRoot

sourceRoot 用来设置源码存放目录,通过 Taro 开发工具初始化后的项目源码目录都是 src,你可以通过修改这一配置来重新指定源码目录。

outputRoot

outputRoot 用来设置代码编译后的生产目录,通过 Taro 开发工具初始化后的生产目录都是 dist,你可以通过修改这一配置来重新指定生产目录。

plugins

plugins 用来设置一些各个端通用的编译过程配置,例如 babel 配置,JS/CSS 压缩配置等。

plugins.babel

用来配置 babel,默认配置如下,可以自行添加自己需要的额外的 presetsplugins

  1. babel: {
  2. sourceMap: true,
  3. presets: [
  4. 'env'
  5. ],
  6. plugins: [
  7. 'transform-class-properties',
  8. 'transform-decorators-legacy',
  9. 'transform-object-rest-spread'
  10. ]
  11. }

plugins.uglify

用来配置 UgligyJS 工具,设置打包过程中的 JS 代码压缩。可以通过 plugins.uglify.enable 来设置是否开启压缩,若设置开启,则可以通过 plugins.uglify.config 来设置 UgligyJS 的配置项,具体配置方式如下:

  1. uglify: {
  2. enable: true,
  3. config: {
  4. // 配置项同 https://github.com/mishoo/UglifyJS2#minify-options
  5. }
  6. }

plugins.csso

用来配置 csso 工具,设置打包过程中的 CSS 代码压缩。可以通过 plugins.csso.enable 来设置是否开启压缩,若设置开启,则可以通过 plugins.csso.config 来设置 csso 的配置项,具体配置方式如下:

  1. csso: {
  2. enable: true,
  3. config: {
  4. // 配置项同 https://github.com/css/csso#minifysource-options
  5. }
  6. }

env

用来设置一些环境变量如 process.env.NODE_ENV,例如我们想设置区分预览、打包来做些不同的操作,可以如下配置:

config/dev.js

  1. env: {
  2. NODE_ENV: '"development"' // JSON.stringify('development')
  3. }

config/prod.js

  1. env: {
  2. NODE_ENV: '"production"' // JSON.stringify('production')
  3. }

这样就能在代码中通过 process.env.NODE_ENV === 'development' 来判断环境

defineConstants

用来配置一些全局变量供代码中进行使用,例如

  1. defineConstants: {
  2. A: '"a"' // JSON.stringify('a')
  3. }

copy

文件 copy 配置,包含两个配置项 patternsoptions

copy.patterns

用来指定需要拷贝的文件或者目录,数组类型,每一项都必须包含 fromto 的配置,分别代码来源和需要拷贝到的目录,同时可以设置 ignore 配置来指定需要忽略的文件, ignore 是指定的 glob 类型字符串,或者 glob 字符串数组

值得注意的是,目前 from 必须指定存在的文件或者目录,暂不支持 glob 格式, fromto 直接置顶项目根目录下的文件目录,建议 fromsrc 目录开头,todist 目录开头

一般有如下的使用形式

  1. copy: {
  2. patterns: [
  3. { from: 'src/asset/tt/', to: 'dist/asset/tt/', ignore: '*.js' }, // 指定需要 copy 的目录
  4. { from: 'src/asset/tt/sd.jpg', to: 'dist/asset/tt/sd.jpg' } // 指定需要 copy 的文件
  5. ]
  6. },

copy.options

拷贝配置,目前可以指定全局的 ignore

  1. copy: {
  2. options: {
  3. ignore: ['*.js', '*.css'] // 全局的 ignore
  4. }
  5. }

weapp

专属于小程序的配置

weapp.compile

小程序编译过程的相关配置

weapp.compile.exclude

配置小程序编译过程中排除不需要经过 Taro 编译的文件,数组类型,写文件路径,文件路径必须以源码所在 src 目录开头

  1. weapp: {
  2. compile: {
  3. exclude: ['src/components/ec-canvas/echarts.js']
  4. }
  5. }

weapp.module

配置一些小程序端用到的插件模块配置,例如 postcss

weapp.module.postcss

配置 postcss 相关插件

  1. postcss: {
  2. autoprefixer: {
  3. enable: true
  4. },
  5. pxtransform: {
  6. selectorBlackList: ['body']
  7. },
  8. // 小程序端样式引用本地资源内联
  9. url: {
  10. enable: true,
  11. limit: 10240
  12. }
  13. }

h5

专属于 H5 的配置

h5.devServer

预览服务的配置,可以更改端口等参数。具体配置参考webpack-dev-server

  1. devServer: {
  2. port: 10086
  3. }

默认是http服务,如果想开启https服务需要做如下配置。

  1. devServer: {
  2. https: true
  3. }

h5.publicPath

设置输出解析文件的目录

h5.staticDirectory

h5 编译后的静态文件目录

h5.webpack

自定义webpack配置。这个配置项支持两种形式的配置。

  1. 如果该配置项以对象的形态呈现,taro将会使用 webpack-merge 将这个对象合并到默认的配置项中。
    例子:

    1. webpack: {
    2. resolve: {
    3. alias: {
    4. 'test': './test'
    5. }
    6. }
    7. }
  2. 如果该配置以函数的形态呈现,那这个函数将会接收到两个参数:默认配置(defaultConfig)和webpack实例(webpack)。taro将会以该函数的返回值作为最终的webpack配置。
    例子:

  1. webpack (defaultConfig, webpack) {
  2. defaultConfig.plugins.push(
  3. new webpack.EnvironmentPlugin(['NODE_ENV'])
  4. )
  5. return defaultConfig
  6. }

h5.module

配置一些 H5 端用到的插件模块配置,例如 postcss

h5.module.postcss

配置 postcss 相关插件

  1. postcss: {
  2. autoprefixer: {
  3. enable: true
  4. },
  5. pxtransform: {
  6. selectorBlackList: ['body']
  7. }
  8. }