为了账号安全,请及时绑定邮箱和手机立即绑定

新手也能轻松上手React、ES6、Webpack

2016.07.17 16:54 9498浏览

原文标题:对于React、ES6、Webpack的简单理解

大水淹了江城,被迫进行了今年第二次封闭式开发;远离公司,不胜唏嘘,幻化成大雨,远方的人啊,愿你能出现在我梦里;靠!码农哪有时间做梦啊,倒床上就着了,眼睛一睁,又要继续码了。。。

做前端一年多了,睡前反省反省后发现:工作以html、css、js、jquery为主,伴有少量(HTML5、CSS3);业余入门级Angular、React、ES6、Nodejs、自动化;那一晚,我又失眠了,为嘛牛逼的,我都只是入门级;想想我那小站点又是一个多月没更新了,技术面又窄,未来在哪里?宝宝心里苦啊;痛定思痛后,只有业余扣点时间用React和ES6改写小站的后台了,是的,博客战场模式又要开启了!

React:仅仅是UI、虚拟DOM、数据流;无疑是前端组件式开发的利器,太强大了,大家都知道,我什么都没说;我只知道我喜欢React就一个原因:我喜欢这种优雅的代码风格;为什么这么多人喜欢杨钰莹,因为总有人诗一般的活着!

去年试水React的时候,感觉还挺容易上手,这次一玩,才发现,不会点ES6不行啊,不会点Nodejs玩不起来啊!之前用Grunt、Gulp打包css、js,如今webpack霸屏了,什么都干,你懂的!话说用了webpack后我就真的相信webpack是最好的了;随便两行代码,webpack不uglify后就是700K,如果你像我一样傻,每次重启webpack,打包一次就相当于进入一次广告时间,你可以上趟厕所,整点吃的,喝的,凉快凉快;好吧,watch就不用每次等广告时间了;可能这些只是属于新手的抓狂吧;

如果你也是新手,如果你也为React、Angular、Nodejs这些牛逼的技术抓狂过,其实没关系,想想那些奇葩 需求,有时恨不得让你改框架源码的时候;再想想,其实技术本身并不难。。。

1、webpack小觑

webpack大而全,和静态资源相关的所有它都能干涉,当然,还能启动server;webpack主要以loaders和plugins处理各种静态资源;

loaders:

在React里会用到JSX、ES6、js,我统一将文件后缀使用.js,便于babel的配置:

npm install --save babel-loader
//
{
   test: /\.js?$/,
   exclude: /node_modules/,
   loader: 'babel',
   query: {
      presets: ['es2015', 'react']
   }
}

CSS、scss、iconfront字体文件:

npm install --save style-loader css-loader sass-loader url-loader file-loader
//
{
   test:/\.css$/,
   loader: ExtractTextPlugin.extract("style-loader", "css-loader")
},{
   test: /\.scss$/,
   loader: ExtractTextPlugin.extract("style-loader", "css!sass")
},
{test: /\.(woffwoff2)/,   loader: "url?limit=10000&minetype=application/font-woff&name=./[name].[ext]"},
{test: /\.(ttfeotsvg)/,    loader: "file?name=./[name].[ext]"},
{test: /\.otf/,    loader: "file?name=./[name].[ext]&minetype=application/font-otf"}

想将css独立出来的话:

npm install --save extract-text-webpack-plugin
//
var plugins=[];
var ExtractTextPlugin = require('extract-text-webpack-plugin');
plugins.push(new ExtractTextPlugin('./app-[hash].css?[hash]'));

处理图片:

npm install --save url-loader
//
{
   test:/\.(pngjpggif)$/,
   loader:'url-loader?limit=10&name=[name].[ext]'
}

多个loader通过!区分,同时接受查询参数以?连接,类似于用!区分多个url,比如:loader1?name=[name]-[hash].[ext]&limit=10000!loader2?xxx=xx;可以使用require语句加载loader,也可以通过配置中的正则表达式来绑定loader;

plugins:

我首先看重了html-webpack-plugin和assets-webpack-plugin还有上面的extract-text-webpack-plugin,因为牵扯到我挺感兴趣的一块:前后端的分离及自动化;

html-webpack-plugin会由entry的配置将入口文件所属的html文件作为模板,重新生成一个html文件,其中的静态资源都已根据配置打包好,貌似很不错哦!不过有两个问题,还没解决:(1)、如果静态资源和主站是各自独立的站点,而将html作为静态资源对待的话,主站有路由相关配置的话,好像有点扯不开了;要是只在本地开发这样配置,各自独立上线的话,跨域时本地不便于测试;(2)、页面上的图片路径没做处理,可能要求有点多了。。。(3)、将html作为模板对待了,那么如何include其他模板;由于这三个原因,暂时不敢说html-webpack-plugin很适用,特别是第一点;继续探索中。

var plugins=[];
var HtmlWebpackPlugin = require('html-webpack-plugin');

plugins.push(new HtmlWebpackPlugin({
    template: './files/es6.html',
    filename: 'es6.html',
    title:'hhhhhh',
    inject: true,
    chunks:['entry1']//可以new多个html由entry区分
}));

使用webpack后,对文件的版本hash将变得非常简单:出口文件的name加上[hash]即可;可能现在来说,清除静态资源缓存最好的做法就是文件名hash了,注意不是加个后缀可以的;对于流量非常高的站点,即使等到三更半夜上线,如果仅仅加个后缀清缓存的话,也难免会出事,因为页面和静态资源同步时会有时间差,而在这个间隙有用户访问的话,页面出错的可能性就很大了;而文件名hash的方式就能很好的避免这个问题,由于每次改动后生成的文件名都不一样,上线并不是覆盖之前的版本,只是多了一个版本的文件,再上页面文件即使同步有时间差,要么访问旧版页面和旧版资源,要么访问新版页面新版资源,就不存在冲突了,这样服务器可以大胆的对静态资源开启永久强缓存,并且有利于回滚;至于静态资源由此产生的积压,交给运维处理吧!

使用html-webpack-plugin能很好的配合文件名hash,基于上面的小问题。。。

现在生成文件名hash很简单了,怎么对应页面一起改呢?

(1)、自己动手慢慢改去吧

(2)、页面由前端输出:生成map.json,根据这个配置读文件对应改资源引用的路径

(3)、页面由后端输出:生成map.json,后端读这个配置动态加载页面引用的资源路径

总之,就是要生成map.json,这里就简化了很多,因为不用管文件依赖了,webpack已将依赖文件打包到主文件里了;接下来就是读这个配置文件了,我也不知道,再探!。。。

由assets-webpack-plugin生成map.json:

var AssetsPlugin = require('assets-webpack-plugin');
plugins.push(new AssetsPlugin({
    filename: 'map.json',
    processOutput: function (assets) {
        return JSON.stringify(assets);
    }
}));

map.json大概这样:

{"entry1":{"js":"app-ed03f4fe.js","css":"app-6f7f3cda3d230d8fa897.css"}}

2、React、ES6小觑

配置好了webpack之后,开始React+ES6就不是什么难事了,除了以后会引进的Redux、Flux、Reflux会不好理解外,接下来可以一边React一边ES6了,慢慢来,两不误!说真的,修改state的时候太多了,所以熟悉React后引入Redux是很有必要的;

React里使用JSX语法,不用管了,babel编译;React里使用ES6,尽管用,babel帮你打到ES5;上面不是已配好webpack吗?babel-loader就是帮你干这个的;不过启动webpack时记得watch哦,不然得像我一样老是等广告时间;

不说Hello,world!

无论Angular还是React都提供了一种方式来实现组件化的开发,来扩展HTML标签的不足,这些组件更像是一种描述性的语言,对,可以非常语义化,比如:要一个3行5列的列表,<TableList rows=3 cols=5 data={TableDatas}/>;这样一个列表就出来了,是不是很爽!React仅仅是UI,我认为它是为组件化而生的,而且跨平台,跨终端;

我所想象的组件化是html标签已封装,css、js各自独立;当然要把对应组件的css也一起封装也是完全可以的,为什么要把css也独立呢?我们会用grunt-sass-contrib、gulp-sass、sass-loader,而这些工具已提供了对sass模块化很好的解决方法,比如sass的依赖有loadPath;而我们要做的就是像模块化js一样模块化css,然后在js里require或import该组件所需的css模块即可,因为我要的是用到多少css就加载多少css,最少化的重复,而如果一个组件对应一套css,就很难避免重用了,最后通过上述工具直接打包的css就是你页面所需的了;

我看到了React可以这么做,封装html、扩展标签,封装成组件,组件依赖css模块和js模块;比如登录界面:

import {React} from 'react';
import {ReactDOM} from 'react-dom';

import '../css/fonticons.css';
import '../css/components/login.scss';

import Login from './views/Login';

ReactDOM.render(<Login url={postUrl} />,document.getElementById('views'));

components是Web的未来,而现在是React!components一直吸引着无数前端的探索,以上只是个人初步理解,抛砖引玉,还在探索中。话说部分浏览器已实现了Web components,或许这只是颗启明星,指引着我们走向更美好的未来!

个人博客:花满楼 famanoder.com

点击查看更多内容

本文原创发布于慕课网 ,转载请注明出处,谢谢合作

56人点赞

若觉得本文不错,就分享一下吧!

评论

相关文章推荐

正在加载中
意见反馈 邀请有奖 帮助中心 APP下载
官方微信

举报

0/150
提交
取消