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

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

先安装：

$ 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"}
}

修改 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()]// ...
}

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

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

修改 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)

移动组件库cube-ui之后编译相关推荐

Vue UI组件库(Element UI库)
1 移动端常用 UI 组件库 1. Vant Vant 4 - 轻量.可定制的移动端组件库 (vant-ui.github.io) 2. Cube UI cube-ui Document (didi ...
vue组件库介绍以及组件库Element UI 的使用
组件库前言这篇文章介绍vue组件库! 介绍什么是组件库以及Element UI组件库的使用! 看完不会你打我.哈哈哈,开玩笑的,不多说,上刺刀!! 1. 什么是 vue 组件库在实际开发中,前端 ...
vue统计组件库和ui框架
element ★13489 - 饿了么出品的Vue2的web UI工具套件 Vux ★8133 - 基于Vue和WeUI的组件库 iview ★6634 - 基于 Vuejs 的开源 UI 组件库 ...
前端组件库(Element UI)的实现原理：教你如何实现自定义组件库，并打包发布至npm
前端组件库实现原理前言 Demo地址一. 组件库开发流程 1)新建vue项目: 2)编写自定义组件,封装成插件: 3)修改配置项 webpack.config.js: pakage.json: 4 ...
React UI 组件库 Chakra UI - 01 v1.0介绍和快速使用
Chakra UI Chakra UI 是简单.模块化和可访问的 UI 组件库. 本文 Chakra UI 版本:v1.6.2 基于 React 和 Emotion(CSS-IN-JS 方案库) 基于 ...
React UI 组件库 Chakra UI - 05 案例实践
案例实践使用 create-react-app 新建项目. 表单使用 Chakra UI 实现下图的表单: 构建注册表单 react-icons 是一个 React 流行图标库. // compo ...
UI组件库Kendo UI for Vue中文入门指南（四）
在本文中,您将通过构建一个包含 Grid.DropDownList.Window 和设计主题的小应用程序来学习如何使用Kendo UI for Vue组件. Kendo UI最新官方正式版下载 7. ...
UI组件库Kendo UI for Vue中文入门指南（二）
在本文中,您将通过构建一个包含 Grid.DropDownList.Window 和设计主题的小应用程序来学习如何使用Kendo UI for Vue组件. Kendo UI最新官方正式版下载 5. ...
UI组件库Kendo UI for Vue中文入门指南（一）
在本文中,您将通过构建一个包含 Grid.DropDownList.Window 和设计主题的小应用程序来学习如何使用Kendo UI for Vue组件. Kendo UI最新官方正式版下载 1. ...
UI组件库Kendo UI for Vue原生组件中文 - 按钮概述
Kendo UI for Vue Buttons包提供了代表用户可以采取的简单操作的触发器组件. Buttons package是Kendo UI for Vue库的一部分,它为Vue生态系统提供原生 ...

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

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

移动组件库cube-ui之后编译相关推荐

最新文章

热门文章