写es6,一般都会用到babel,它能把es6转为更好的es5,而es5可以直接在浏览器上运行.postcss是css界的babel,它可以把css转为更好的css,比如autoprefixer,让不同浏览器都支持某属性效果.我不知道为什么会有es6的出生,但是它的出现,确实让javascript更加先进,简洁,这就是技术的力量.既然es6都出现了,为什么浏览器们不尝试去认识es6呢?编写es6的人当初是怎么思考的?浏览器们会不会与时俱进呢? 工作中的我们,常常要考虑很多适配问题,但是大家似乎一

CSS全称Cascading Style Sheets(层叠样式表),用来为HTML添加样式,本质上是一种标记类语言.CSS前期发展非常迅速,1994年哈肯·维姆·莱首次提出CSS,1996年12月W3C推出了第一个正式版本.随后不到两年的时间,1998年5月便推出了第二个版本,一直沿用至今.但是CSS3的制订工作却迟迟没有完成.CSS3最初的草案在1999年便被提出,但是直到今日CSS3规范仍然有部分特性没有完成.如果说ES6与ES5相隔的6年时间让开发者们熬尽了心肝,那么从提案到发布相隔近2

Weex是最近很火很NB的一个技术产品,因为本篇介绍的是怎样使用Weex的最佳实践,所以就不罗里吧嗦的夸它怎么怎么好了,感兴趣的可以访问Weex HomePage,或加入旺旺群:1330170019. 利器 俗话说,欲要善其事,必先利其器.对于开发Weex,本人并不推荐裸奔.适合的工具,能让你的工作事半功倍. 快速尝鲜 我们在内网环境搭建了一个在线版的编辑器和预览工具,如果你希望快速尝鲜和试错,可以直接访问http://weex.alibaba-inc.com/playground,并按如下操作

目前除了原生的微信小程序开发外,各大厂商陆续造了自己的开发框架,现整理如下: WePY 腾讯官方开源的小程序组件化开发框架,目前有15K+Star ,一直在更新着,社区活跃,掉坑能快速的找到方法爬出来. github: https://github.com/Tencent/wepy 官方文档: https://tencent.github.io/wepy/ 特性 类Vue开发风格 支持自定义组件开发 支持引入NPM包 支持Promise 支持ES2015+特性,如Async Functions

构建Vue项目 按照官网教程安装 //先安装脚手架 cnpm i -g vue-cli //查看项目目标列表: webpack browserify pwa 等项目模板 vue list //使用webpack模板创建项目 vue init webpack my-project //进去新创建的文件夹 cd my-project //打开package.json 看scripts字段 //dev 可以使用npm run dev 或者 npm start 开启开发模式 //build 可以使用np

1.构建项目 vue create xxx 上面的第一条,也就是 aaa 这一个选项在你第一次创建项目的时候是并不会出现的,只有你第一次创建完成项目后回提示你保存为默认配置模板,下次新建项目的时候就可以使用你选用的配置快速新建项目了,不需要再重新选择配置项目了. 第二条选项便是 vue cli 3 默认的项目模板,包含 babel 和 eslint. 第三条选项便是自主选择你项目所需的配置. 这里由于默认模板没有啥展示的必要所以我们便选择手动配置. 选择项目配置: 这里我们可以选择我们需要的配置

wepy-CLI 安装 npm install -g wepy-cli wepy init standard my-project https://github.com/Tencent/wepy 特性: 类Vue开发风格 支持自定义组件开发 支持引入NPM包 支持Promise 支持ES2015+特性,如Async Functions 支持多种编译器,Less/Sass/Stylus/PostCSS.Babel/Typescript.Pug 支持多种插件处理,文件压缩,图片压缩,内容替换等 支持

其他章节请看: vue 快速入门 系列 vue loader 下 CSS Modules CSS Modules 是一个流行的,用于模块化和组合 CSS 的系统.vue-loader 提供了与 CSS Modules 的一流集成,可以作为模拟 scoped CSS 的替代方案. Tip:请看下面的用法来了解 css modules. 用法 将 App.vue 内容修改为: <template> <div> <p :class="$style.red">

github地址:https://github.com/qianxiaoning/demo-webpack4.26 内含详尽注释 欢迎大家star或者fork呀~ 目录结构: completeDemo 我的完整项目demo completeDemo 我的完整项目demo build webpack构建文件(主要包含dll, copyWebpackPlugin, eslint, babel, less, HtmlWebpackPlugin, webpack-dev-server, hmr, Cle

Babel 是一个javascript编译器,PostCSS 是一个样式转换工具.两者都可以看作是一个转化平台,我们可以在上面使用一些插件,来达到想要的代码转化.几乎每个前端项目都要使用它们. Babel 配置 .babelrc 文件 { "presets": [ // babel-preset-env插件,相当于 es2015 ,es2016 ,es2017 及最新版本.以后只需这一个preset就够了 ["env", { "modules":

更便捷的css处理方式-PostCSS 一般来说介绍一个东西都是要从是什么,怎么用的顺序来讲.我感觉这样很容易让大家失去兴趣,先看一下postcss能做点什么,有兴趣的话再往下看,否则可能没有耐心看下去.让我们开始吧 postcss能做什么 补全css属性浏览器前缀 手写的代码可以是这样的: .div{ display: flex; } postcss可以转换之后成了这样: .div{ display: -webkit-box; display: -ms-flexbox; display: fl

一. 关于babel babel是ES6+语法的编译器,官方网址:www.babeljs.io,用于将旧版本浏览器无法识别的语法和特性转换成为ES5语法,使代码能够适用更多环境. 最初的babel使用起来是非常方便的,几乎仅使用少量的配置就可以使用,但随着工具的快速升级和代码架构的转变,babel已经裂变成非常多的部分,每个部分各司其职,这样做的好处是可以缩小生产环境的正式包的代码体积(因为可以按需引用)而加重了开发环境(开发阶段需要引入更多碎片化的插件),但劣势就是将其使用门槛提得非常高,对软

依赖包: postcss-pxtorem 配置: 在项目根目录下创建 postcss.config.js 配置如下: module.exports = () => ({ plugins: [ require('autoprefixer')(), // require('postcss-px2rem')({ remUnit: 75 }) require('postcss-pxtorem')({ rootValue: 37.5, propList: ['*'] }) ]}); rootValue (

一:PostCss是什么?  PostCss是一个样式处理工具,它通过自定义的插件和工具生态体系来重新定义css.它鼓励开发者使用规范的css原生语法编写代码,然后配置编译器转换需要兼容的浏览器版本,最后通过编译将源码转换为目标浏览器可用的css代码. 它和stylus的不同之处是它可以通过插件机制灵活地扩展其支持的特性,不像stylus的语法是固定的,它的用途非常多,比如css自动加前缀,使用下一代css语法等等. postcss官方有很多插件,查看插件(https://github.com/

一.sass和postcsssass.less.stylus,三者是css预处理器,使用预编码来处理css,然后编译成线上需要的css.postcss是处理你写好的css,让你的css更健康,对浏览器更友好.所以sass和postcss是两码事儿,彼此都有独一无二的地位,不能互相取代,实际开发过程中,推荐sass+postcss,前者生成css,后者生成更好的css.当然,随着postcss插件的增多,sass能做的事,postcss插件也可以办到,因此独立使用postcss进行开发是今后的趋势

什么是postcss postcss 一种对css编译的工具,类似babel对js的处理,常见的功能如: 1 . 使用下一代css语法 2 . 自动补全浏览器前缀 3 . 自动把px代为转换成 rem 4 . css 代码压缩等等 postcss 只是一个工具,本身不会对css一顿操作,它通过插件实现功能,autoprefixer 就是其一. 与 less sass 的区别 less sass 是预处理器,用来支持扩充css语法. postcss 既不是预处理器也不是后处理器,其功能比较广泛,而

许多开发人员花时间在使用CSS的预处理器上如less,sass和stylus.这些工具已经成为Web开发的重要组成部分.写一个网站的样式,不使用嵌套,变量或混入等功能很少见.它们每个都是非常实用的,让我们退后一步看,考虑以这种方式使用预处理器是不是最好的办法.传统的预处理器的问题: 不能扩展.无论您选择哪种预处理,都被限制到设定的,它提供的功能.如果您需要在其上构建功能,在构建过程中,你需要添加一个单独的步骤.如果你想写一个扩展,只能针对你自己的. 不能剔除任何功能.有些预处理器提供诸如sass

点击关注本公众号获取文档最新更新,并可以领取配套于本指南的 <前端面试手册> 以及最标准的简历模板. 前言 Babel 是现代 JavaScript 语法转换器,几乎在任何现代前端项目中都能看到他的身影,其背后的原理对于大部分开发者还属于黑盒,不过 Babel 作为一个工具真的有了解背后原理的必要吗? 如果只是 Babel 可能真没有必要,问题是其背后的原理在我们开发中应用过于广泛了,包括不限于: eslint jshint stylelint css-in-js prettier jsx v

原文链接:A look into writing future CSS with PostCSS and cssnext 译者:nzbin 像twitter,google,bbc使用的一样,我打算看一看使用PostCSS处理的css的世界. PostCSS是什么? PostCSS 是使用 javascript 插件转换 css 的后处理器.PostCSS 本身不会对你的 css 做任何事情,你需要安装一些 plugins 才能开始工作.这不仅使其模块化,同时功能也会更强. 它的工作原理就是解析

在一些新框架的代码中,常基于es6/7标准来书写代码.鉴于这些标准被没有被浏览器广泛支持,我们一般使用babel来将使用e6/7标准书写的代码降级编译(或者说转译)为浏览器可解析的es4/5代码. 以.babelrc文件配置babel为例,presets预设编译规则(预设的编译插件集合)可以设置stage-0 至 stage-3, stage-0包含了stage-1 至 stage-3,也就是说如果设置为stage-0,stage-1 至 stage-3的编译功能默认都有了. stage-0 至