移动组件库cube-ui之后编译

移动组件库cube-ui之后编译

• 背景： 使用webpack+babel开发应用越来越多，而且一般都是通过NPM进行包管理的，这样依赖包越来越多，这些依赖包也是使用ES6+开发的，所以每个包都需要编译才能发布，这样编译后代码中往往包含很多编译代码，为了消除这部分冗余，推荐大家使用后编译。
  后编译解决的问题主要是代码冗余
  目前大部分的前端项目开发都是使用es6+的代码并且使用babel进行编译，而传统的对代码包的引入都是引入一个被babel编译好的文件入口，这样带来了一个缺点，那就是项目中无用的代码也会被引入到最终打包的文件中。
  后编译的思想是不会在包发布的时候进行编译，而是会在使用这个包的前端项目构建的时候进行编译。
• 后编译优点：
  （1）公共的依赖可以实现共用，只此一份，重要的是只编译一次
  （2）babel转换API部分的代码只有一份
  （3）不用每个编译包都需要配置打包环节，甚至可以直接源码级别发布
• 后编译缺点：
  （1）主应用地babel配置需要能兼容依赖包的babe;配置
  （2）依赖包不能使用alias、不能方便地使用DefinePlugin（可以经过一次简单编译，但是不做babel处理）
  （3）应用编译时间变长
• cube ui 后编译步骤：

1. 先安装：

$ npm install cube-ui --save

cube-ui 搭配 webpack 2+ 支持后编译和普通编译 2 种构建方式（默认使用后编译），使用前都需要修改应用的依赖和配置。
2. 修改 package.json 并安装依赖

{
  // webpack-transform-modules-plugin 依赖 transformModules
  "transformModules": {
    "cube-ui": {
      "transform": "cube-ui/src/modules/${member}",
      "kebabCase": true
    }
  },
  "devDependencies": {
    // 新增 stylus 相关依赖
    "stylus": "^0.54.5",
    "stylus-loader": "^2.1.1",
    "webpack-post-compile-plugin": "^1.0.0",
    "webpack-transform-modules-plugin": "^0.4.3"
  }
}

3. 修改 webpack.base.conf.js

var PostCompilePlugin = require('webpack-post-compile-plugin')
var TransformModulesPlugin = require('webpack-transform-modules-plugin')
module.exports = {
  // ...
  plugins: [
    // ...
    new PostCompilePlugin(),
    new TransformModulesPlugin()
  ]
  // ...
}

4. 修改 build/utils.js 中的 exports.cssLoaders 函数

exports.cssLoaders = function (options) {
  // ...
  const stylusOptions = {
    'resolve url': true
  }
  // https://vue-loader.vuejs.org/en/configurations/extract-css.html
  return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders('less'),
    sass: generateLoaders('sass', { indentedSyntax: true }),
    scss: generateLoaders('sass'),
    stylus: generateLoaders('stylus', stylusOptions),
    styl: generateLoaders('stylus', stylusOptions)
  }
}

5. 修改 vue-loader.conf.js

module.exports = {
  loaders: utils.cssLoaders({
    sourceMap: sourceMapEnabled,
    extract: false
  }),
  // ...
}

6.使用：
全部引入

在入口文件
import Vue from 'vue'
import Cube from 'cube-ui'

Vue.use(Cube)