前端生态这几年可谓迎来了大发展,在这个生态圈内,不接受新事物学习新技能,等于堕入魔道。
本文尝试对前端开发利器React,以及构建项目过程中涉及的技术栈进行介绍,以期开启整个构建流程上的思考。
有必要指出的是,要弄明白一件事情的原理,首先要知道它的目的是什么。
1、Nodejs & NPM
为什么要提nodejs呢?
与其说nodejs提供了服务端开发的另一种可能,不如说它彻底改变了整个前端开发的生态。nodejs平台上衍生出了强大的npm、grunt、express等,几乎重新定义了前端的工作流程和开发方式。
这里有必要来讲一讲NPM(node package manager)这个包管理器。
npm是javascript包管理器,我们可以在npm上找到、分享和使用来自无数开发者贡献的代码包,而无需自己造轮子。
使用npm,需要安装node。新的版本的nodejs已经集成了npm,安装好nodejs,通过以下命令查看所安装的版本:
$ npm -v
在项目目录内,当在命令行执行
$ npm install
它会识别一个叫package.json的文件,并尝试安装该文件内配置的依赖包。
2、React
React的组建化思想使得代码重用性高,易于测试、更容易分离关注点(separation of concerns)。
React还宣称Learn Once, Write Anywhere。既可运行在客户端浏览器,又能在服务端渲染,同时React Native还使得React开发原生app成为可能。
下面我们来写一个简单的React程序,让其能够运行起来:
项目目录:
第一步:新建一个package.json文件,指定项目所需的依赖包。
{ "name": "react-tutorials", "version": "1.0.0", "description": "", "author": "yunmo", "scripts": { "start": "webpack-dev-server --hot --progress --colors --host 0.0.0.0", "build": "webpack --progress --colors --minimize" }, "dependencies": { "react": "^15.4.0", "react-dom": "^15.4.0" }, "devDependencies": { "webpack": "^2.2.1", "webpack-dev-server": "^2.4.2" }, "license": "" }
这是npm包管理器的必要文件,定义了该项目的名称、版本、启动命令、生产环境依赖包(dependencies)和开发环境依赖包(devDependencies)。
第二步:新建一个index.html文件。
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>yunmo</title> <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/> </head> <body> <div id="yunmo"></div> <script src="bundle.js"></script> </body> </html>
第三步:写一段简单的React代码。
var React = require('react'); var ReactDOM = require('react-dom'); var element = React.createElement( 'h1', {className: 'yunmo'}, '云陌,欢迎来到react的世界!' ); ReactDOM.render ( element, document.getElementById('yunmo') );
第四步:运行。
那么如何在浏览器里运行呢?这里我们需要借助强大的webpack-dev-server来开启本地服务器。
我们可以看到上面的package.json里面有webpack和webpack-dev-server依赖包。下面会介绍webpack。
当然我们还可以通过nodejs来建立一个本地服务器,但这里其实webpack-dev-server是一个小型的nodejs Express服务器,它使用webpack-dev-middleware中间件来服务于webpack包。
webpack.config.js文件配置如下:
var webpack = require('webpack'); module.exports = { entry: ['./app/main.js'], output: { path: __dirname + '/build', filename: 'bundle.js' }, module: { loaders: [] } }
这样我们在命令行通过npm install安装好依赖包以后,敲打命令
$ npm start
运行服务后,在浏览器中输入http://localhost:8080/
React在浏览器运行结果
一个简单的React项目便运行起来了。
3、Webpack
webpack是一款现代JavaScript应用的模块加载兼打包工具,它不仅仅可以打包JavaScript,还可以打包styles,images等资源。
来看一个典型的webpack配置:
var webpack = require('webpack'); var path = require('path') module.exports = { entry: ['./app/main.js'], output: { path: path.resolve(__dirname, '/build'), filename: 'bundle.js' }, module: { loaders: [ { test: /.js$/, exclude: /node_modules/, loader: 'babel-loader' }, { test: /.scss$/, loaders: ["style-loader", "css-loader", "sass-loader"] }, { test: /.(otf|eot|svg|ttf|woff|png|jpg)/, loader: 'url-loader?limit=8192&name=images/[hash:8].[name].[ext]' } ] }, plugins: [ new webpack.optimize.UglifyJsPlugin() ] }
从上面webpack配置里面可以看出来有一些基本的配置点,也反映了webpack的四个理念:
entry——webpack会根据应用的依赖关系,创建一个关系表。该表的起始点便是所谓的entry point(入口点)。entry point会告诉webpack从哪入手,webpack会以该表的依赖关系作为打包依据。
output——用于配置打包后的文件放置路径。
loader——webpack把每个文件都看作组建(如.css, .html, .scss, .jpg, .png等),但是webpack只能识别JavaScript。这时候loaders便可以把这些文件转换成组建,进而被添加到依赖关系表。
plugins——因为loaders作用方式是以单一文件为基础的,所以plugins更广泛的用来对打包组建形成的集合(compilations)进行自定义操作。
这样,一个完整的模块打包体系就建立起来了。
4、ES6
ES6,即ECMAScript 6.0,是 JavaScript的下一代标准。ES6里面新增了很多语法特性,使得编写复杂的应用更加优雅自然。
ES6中引入了诸如let和const、箭头函数、解构赋值、字符串模版、Module、Class、Promise等特性,使得前后端编程语言在语法形式上的差异越来越小。
我们来看一下:
import React from 'react' //模块引入 import '../styles/reactStack.scss' class ReactStack extends React.Component { //class特性 render() { const learner = {name: '云陌', age: 18} //const定义变量 const mainSkills = ['React', 'ES6', 'Webpack', 'Babel', 'NPM',] const extraSkills = ['Git', 'Postman'] const skillSet = [...mainSkills, ...extraSkills] const { name } = learner //解构赋值 let greetings = null //let定义变量 if (name) { greetings = `${name},欢迎来到${mainSkills[0]}的世界!` //字符模版 } //以下用了箭头函数 return ( <div className="skills"> <div>{greetings}</div> <ol> {skillSet.map((stack, i) => <li key={i}>{stack}</li>)} </ol> </div> ) } } export default ReactStack //模块导出
当然,并非所有浏览器都能兼容ES6全部特性,但看到这么优雅的书写方式,只能看怎么行呢?因此,这里又引出了一个神器,Babel!
5、Babel
Babel是一款JavaScript编译器。
Babel可以将ES6语法的代码转码成ES5代码,从而在浏览器环境中实现兼容。
Babel内置了对JSX的支持,所以我们才能向上面那样直接return一个JSX形式的代码片段。
具体用法不在本文过多讲述。
6、Styles引入
在上面的代码中,有以下样式引入方式:
import '../styles/reactStack.scss'
样式文件如下:
body { background: #f1f1f1; } .skills { h3 { color: darkblue; } ol { margin-left: -20px; li { font-size: 20px; color: rgba(0, 0, 0, .7); &:first-child { color: #4b8bf5; } } } }
样式文件要在项目中起作用,还需要在package.json里面添加相应的loader依赖,如css-loader, sass-loader, style-loader等,别忘了package.json里还需要node-sass依赖,然后安装即可。
webpack.config.js中相应配置如下:
module: { loaders: [ { test: /.js$/, exclude: /node_modules/, loader: 'babel-loader' }, { test: /.scss$/, loaders: ["style-loader", "css-loader", "sass-loader"] } ] }
再将main.js中的内容作如下更改:
import React from 'react' import ReactDOM from 'react-dom' import ReactStack from './pages/ReactStack' ReactDOM.render ( <ReactStack />, document.getElementById('yunmo') );
最后在浏览器中可以看到:
结语
至此,一个简单的React项目便搭建起来了。
在后续的文章中,我将对本文涉及到的React技术栈做专门的讲解,不仅限于硬性技能。当然更多的是实践做法上的总结,因为如果要掌握它们的理论,细看官方文档和源码是最好不过的做法。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。