for weapp : 允许用户配置任意postcss插件，支持用户自定义postcss插件，新增babel-plugin-transform-image-to-url， 新增postcss-plugin-image-to-url

[wujjpp]

1. 修改processStyleWithPostCSS， 允许用户配置任意postcss插件

2. 修改模板项目创建模板 config -> index.js
   

[wujjpp]

由于全部在master上修改，有点乱，汇总一下变更，对于小程序：

1. 目前postcss插件配置相对比较固定，改成允许用户任意配置postcss插件，类似babel plugin配置，主要修改了了 taro-cli/src/weapp.js的processStyleWithPostCSS函数
2. 修改taro-cli/templates/default/config/index和taro-cli/templates/redux/config/index以适应上面的修改
3. 新增 packages/babel-plugin-transform-image-to-url, 用于将 js文件中import的图片转换成 url
4. 新增 packages/postcss-plugin-image-to-url, 用于将css中的图片转换成url, 将css中的字体转换成base64格式

[luckyadam]

非常棒，不过对于 3、4 点，为什么要新增这两个插件呢，目前已经有这两个功能了

[wujjpp]

@luckyadam
主要是考虑到，

1. 不可能把所有图片都已base64的方式嵌入到小程序当中。
2. 为了便于开发，我们也不可能把图片资源预先放到静态资源服务器，并且图片文件名还需要hash。
3. 发布之前需要有一种机制，能将小程序中所有引用到的图片全部导出并且加上hash，以供后续静态资源的部署。

所以我们在开发过程当中，本地会起一个express服务器，用于host静态资源。

发布之前，通过修改babel-plugin-transform-image-to-url和postcss-plugin-image-to-url的publicPath参数，使得生成的js和css中的图片有正确的CDN地址。

src/server.js 简单本地静态资源服务

var express = require('express') // eslint-disable-line
var path = require('path') // eslint-disable-line
var compression = require('compression') // eslint-disable-line

var app = express()

app.use(compression())
app.use(express.static(path.join(process.cwd(), 'dist', 'static'), {
  maxAge: '3d'
}))

const PORT = 9000

let consoleLogger = console
app.listen(PORT, function(err) {
  if (err) {
    throw err
  }
  consoleLogger.log(`Listening at http://localhost:${PORT}/`) // eslint-disable-line
})

npm run dev:weapp 或者 npm run build:weapp 之后，在dist目录生成app和static两个目录，一个用于发布小程序，一个用于部署静态资源

另外postcss-plugin-image-to-url，还具备字体文件转base64功能，小程序中外部字体文件是有问题的，必须本地base64化。

/config/index.js 目前这两个插件是通过本地路径的方式引入的

const config = {
  projectName: 'taro-app',
  date: '2018-11-1',
  sourceRoot: 'src',
  outputRoot: 'dist/app',
  plugins: {
    babel: {
      sourceMap: true,
      presets: [
        'env'
      ],
      plugins: [
        'transform-class-properties',
        'transform-decorators-legacy',
        'transform-object-rest-spread',
        [
          './tools/babel-plugin-transform-image-to-url', {
          publicPath: 'http://127.0.0.1:9000/',
          staticDirectory: 'dist/static'
        }]
      ]
    },
    uglify: {
      enable: false,
      config: { }
    }
  },
  defineConstants: {
    __DEV__ : true, // 是否为开发环境
    __SIT__ : false, // 是否为sit环境
    __UAT__ : false, // 是否为uat环境
    __PROD__ : false, // 是否为prod环境
    __WEAPP__ : false, // 是否为微信小程序环境
    __SWAN__ : true, // 是否为百度小程序环境
    __H5__: false // 是否为h5环境
  },
  copy: {
    patterns: [],
    options: {}
  },
  weapp: {
    module: {
      postcss: {
        autoprefixer: {
          browsers: [
            'last 3 versions',
            'Android >= 4.1',
            'ios >= 8'
          ]
        },
        'postcss-pxtransform': {
          designWidth: 375,
          platform: 'weapp',
          deviceRatio: {'640': 1.17, '375': 0.5, '828': 0.905}
        },
        './tools/postcss-plugin-image-to-url': {
          publicPath: 'http://127.0.0.1:9000/',
          staticDirectory: 'dist/static'
        }
      }
    }
  },
  h5: {
    publicPath: '/',
    staticDirectory: 'static',
    module: {
      postcss: {
        autoprefixer: {
          browsers: [
            'last 3 versions',
            'Android >= 4.1',
            'ios >= 8'
          ]
        }
      }
    }
  }
}

module.exports = function (merge) {
  if (process.env.NODE_ENV === 'development') {
    return merge({}, config, require('./dev'))
  }
  return merge({}, config, require('./prod'))
}

[wujjpp]

非常棒，不过对于 3、4 点，为什么要新增这两个插件呢，目前已经有这两个功能了

@luckyadam ，
我先把3，4两点提到的plugin移除掉，还原templates->default->config->index 和 template->redux->config->index 里面的deviceRatio配置

[luckyadam]

@wujjpp 收到~

[wujjpp]

@wujjpp 收到~

@luckyadam
在Webpack里面我们可以使用DefinePlugin来实现条件编译， Taro测试下来，通过在config.defineConstants 定义defineConstants

 defineConstants: {
    __DEV__: true, // 是否为开发环境
    __SIT__: false, // 是否为sit环境
    __UAT__: false, // 是否为uat环境
    __PROD__: false, // 是否为prod环境
    __WEAPP__: false, // 是否为微信小程序环境
    __SWAN__: true, // 是否为百度小程序环境
    __H5__: false // 是否为h5环境
  },

举个例子：通过下面的方式来选择性require

var config
if (__DEV__) {
   config = require('开发环境业务配置文件')
}
if (__SIT__) {
  config = require('集成测试环境业务配置文件')
}
if (__UAT__) {
  config = require('用户接受测试环境业务配置文件')
}
if (__PROD__) {
  config = require('生产环境环境业务配置文件')
}

最后使用uglify处理下面代码

// 该代码将会被uglify保留
if (true) {
  config = require('开发环境业务配置文件')
}

// 该代码将会被uglify移除
if (false) {
  config = require('集成测试环境业务配置文件')
}

// 该代码将会被uglify移除
if (false) {
  config = require('用户接受测试环境业务配置文件')
}

// 该代码将会被uglify移除
if (false) {
  config = require('生产环境环境业务配置文件')
}

在Taro执行完build:weapp之后，虽然移除了不满足条件编译的代码，但是在dist目录里面还是会生成所有环境配置文件，要是可以在 wxTransformer执行之前，先做一次条件编译检查&移除代码，这样就完美了。

[luckyadam]

@wujjpp 确实，环境配置文件还在，这个我看下能否优化

[DiamondYuan]

@wujjpp 为什么不是本地开发时全部图片转 base64，发布时候把一部分图片转 base64，另外一部分转 url 呢？

如果是本地起静态服务器，还有端口冲突的风险。