前端技术框架
如今的前端技术日趋成熟，再也不是以前html+js+css的时代了。
当然，比起后端的成熟，前端还处于一个混乱时期，但是很多技术开始崭露头角。基本的思想也是越来越趋向于面向组件化，
版本化，可复用性等后端的思想。也许未来，前端后端又和在一起了，想起了很久以前的swing，确实怀念。
历史
所谓前端，就是用户直接接触的东西，直接面对用户。早期的html只是个标记，并不能动态展示，后来加入js脚本语言，可以
做些动态的东西，然后css也统一了样式风格，似乎一切都美好起来了。但是，大多数的框架还是动态生成html页面，类似JSP，ASP，
PHP这些，都是由后端动态生成html，然后浏览器解读。这样的问题就是，后端的数据问题和前端的页面美化问题纠缠在一起。
ajax是个革新者，不再一页一页的动态生成前端页面，而是局部更新数据。当然，无论如何，浏览器这个障碍确实是无法跨越。
各种浏览器，很难统一兼容，前端开发者还是需要操作各种浏览器的ODM元素。jquery极大简化了对DOM的操作，所以一下火了起来，
几乎无所不用。前端技术不断发展，事实上，与后端一样，我们都想一劳永逸，避开那些重复的体力劳动。这就是我们的目标是：
可复用，可扩展，可阅读，可维护……
目标
复用是最迫切的渴望，至少能够做代码搬运工。扩展可不是在原有代码上改动，而是新增的方式。可读性，也是入门门槛，可读性强的代码
至少能够使人心情舒畅。可维护，就是以上几点都加上，那么维护起来就很惬意。
如何做
安装node 6.3
好了，废话太多，直接切入主题，后端的版本依赖，打包问题，我们有maven，gradle等工具，这些工具使我们清晰的了解一个项目。
并且在测试，部署，等等问题上都可以很好的集成。那么前端呢？nodejs提供了npm，这里可以看成是maven一样的工具。
首先下载https://nodejs.org/dist/v6.9.1/node-v6.9.1-x64.msi （linux版本请到主页下载 https://nodejs.org/en/ ）
安装完成，请在命令行执行
C:\node --version
v6.3.0
C:\npm --version
3.10.3
npm设置
这里只需要配置下远程的库地址
使用以下命令
npm config set registry https://registry.npm.taobao.org/
这里实际上可以做私有的库，使用的是国内的淘宝镜像。只是为了快点。
首次使用，在webapp目录下，使用
npm install
会自动安装所有模块到 node_modules 目录下。这个目录的东西请不要提交到git
安装webpack
webpack 是用来打包的，当然打包过程中也对代码做了转换，所以我们可以使用es6，而最后再es5环境中执行。具体的webpack，下面
会说到。但是首先，先安装。
npm install webpack -g
g 表示全局
webpack安装好以后，使用起来也是很方便，
如果需要调试，可以使用
webpack -d
d会生成map文件，调试需要，映射原文件
如果上线，可用
webpack -p
如果需要动态调试，可以加上
webpack --watch -d
watch选项动态监控文件改变。有改变自动重新打包。
目录结构
工具好了，那么他们在目录中是一个什么样的结构呢？
* --build
* --common.js
* --common.js.map
* --main.js
* --main.js.map
* --
* --css
* --base.css
* --node_modules
* --src
* --main.js
* --index.html
* --package.json
* --webpack.config.js
build是打包后的最终目录,如果使用了d选项，那么我们可以看到map文件。
css目录存放css文件
node_modules目录下，是安装的各种组件。执行npm install时候安装的
src则是存放我们源码的地方
index.html可以理解成入口文件，最终加载我们的成果的。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<link href="build/main.css" rel="stylesheet" type="text/css">
<link href="build/common.css" rel="stylesheet" type="text/css">
<title>标题</title>
</head>
<body>
<div id="wrap"></div>
</body>
<script src="./build/common.js"></script>
<script src="./build/main.js"></script>
</html>
package.json 打开发现很像maven的pom文件
{
"name": "webpk",
"version": "1.0.0",
"description": "mytest",
"main": "index.js",
"scripts": {
"test": "test"
},
"repository": {
"type": "git",
"url": ".."
},
"keywords": [
"test"
],
"author": "yinsx",
"license": "MIT",
"devDependencies": {
"webpack": "^1.13.3"
},
"dependencies": {
"style-loader": "^0.13.1",
"url-loader": "^0.5.7"
}
}
此文件可以用命令生成
npm init
接下根据提示一步一步完成即可。
最后是这个文件webpack.config.js，如果只是打包，估计也没啥讲的。
这里的配置，主要告诉webpack，打什么包，如何打包，同时如何处理各种文件（js,css,icon等）。
这里给个简易配置
var webpack = require('webpack');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
module.exports = {
entry: {
"main":"./src/main.js"
},
output: {
path:'./build',
filename:"[name].js"
},
module:{
loaders:[
{test:/\.jsx$/,loader:'babel-loader!jsx-loader?harmony'},
//css load
{test:/\.css$/,loader:ExtractTextPlugin.extract("style-loader","css-loader")},
{test:/\.js$/,
loader:'babel',
query:{
cacheDirectory:true,
plugins:[
"transform-decorators-legacy",
"transform-class-properties",
],
presets:["es2015","react"]}
},
{test:/\.(png|jpg)$/,loader:'url-loader?limit=8192'}
]
},
resolve:{
extensions:["",".js",".jsx",".json"]，
alias: {
jquery: "jquery/src/jquery"
}
},
plugins:[
new ExtractTextPlugin("[name].css"),
new CommonsChunkPlugin({
names:['common'],
minChunks:Infinity
})
],
};
webpack.config.js 配置
在此过程中，我们会遇到很多问题。
第一句 require("webpack")这个webpack从何而来呢？
这就是我们开始安装的webpack，可以使用命令
npm install url-loader -save|-save-dev
这里save或者save-dev会把依赖存入package.json中
安装好这些组件，就可以在配置的时候使用了。
var ExtractTextPlugin = require("extract-text-webpack-plugin");
这句，引入一个外部插件，主要作用是把css文件独立作为.css，不打包到脚本中。这样可以使用link引用，而不是使用
style内嵌。
在plugins里，我们看到使用方法（创建）：
pulugins:[
new ExtractTextPlugin("[name].css")
]
使用
module{
loaders:[
{test:/\.css$/,loader:ExtractTextPlugin.extract("style-loader","css-loader")},
]
}
CommonsChunkPlugin 这个插件则是用来提取公共的模块。这样我们能够控制把相似的模块打到一个包中。
var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
module.exports = {
entry: {
p1: "./page1",
p2: "./page2",
p3: "./page3",
ap1: "./admin/page1",
ap2: "./admin/page2"
},
output: {
filename: "[name].js"
},
plugins: [
new CommonsChunkPlugin("admin-commons.js", ["ap1", "ap2"]),
new CommonsChunkPlugin("commons.js", ["p1", "p2", "admin-commons.js"])
]
};
entry 是入口文件（输入）可以是一个对象。
output是输出文件。
module则是各种加载器用于加载不同的语法语言
从module我们看到，加载css的，加载图片的，还有加载jsx的，加载js的
这里的加载js比较复杂。
module:{
loaders:[
{test:/\.jsx$/,loader:'babel-loader!jsx-loader?harmony'},
//css load
{test:/\.css$/,loader:ExtractTextPlugin.extract("style-loader","css-loader")},
{test:/\.js$/,
loader:'babel',
query:{
cacheDirectory:true,
plugins:[
"transform-decorators-legacy",
"transform-class-properties",
],
presets:["es2015","react"]}
},
{test:/\.(png|jpg)$/,loader:'url-loader?limit=8192'}
]
},
babel是个什么东西呢？其实就是一个转化器，他把ES6的语法转化成ES5,query是获取加载器的参数。曾经在这里坑了很久，
就是因为，忽略了版本问题，网上很多都是babel5的配置，而我的版本却是 babel6
* babel6
"babel-core":"6.18.2",
"babel-loader":"6.2.7",
* babel 5
"babel-core": "^5.8.25",
"babel-loader": "^5.3.2",
对于６的配置，可以参考前面的配置，对于５，则可以参考一下配置
module: {
loaders: [{
test: /\.js$/,
loader: 'babel-loader',
query: {
optional: ["es7.decorators", "es7.classProperties"]
}
}, {
test: /\.jsx$/,
loader: 'babel-loader!jsx-loader?harmony'
},{test:/\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader")},
{test: /\.scss$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader!sass-loader")},
{test: /\.less$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader!less-loader")},
{ test: /\.(png|jpg|gif)$/, loader: 'url-loader?name=img/[hash:8].[name].[ext]' },
{ test: /\.(eot|ttf|svg|woff)$/, loader: 'url-loader?name=font/[hash:8].[name].[ext]' }]
},
resolve 其实简化了我们的后缀，也就是不需要写后缀。比如 require("abc")
使用别名alias也可以配置搜索路径，jquery就是一个独特的路径
module.exports = {
resolve: {
alias: {
js: path.join(__dirname, "src/scripts"),
src: path.join(__dirname, "src/scripts"),
styles: path.join(__dirname, "src/styles"),
img: path.join(__dirname, "src/img")
},
root: [
path.join(__dirname, "bower_components")
]
},
plugins: [
new webpack.ResolverPlugin(
new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin(".bower.json", ["main"])
)
]
}
好了，到目前，基本的配置就完成了。那么下面是我们如何开发呢？
编写代码
代码编写，最终有个html页面加载我们开发的页面。
还记得index.html吗？
里面有个div id="wrap"
这里就是入口的关键，看我们的代码src/main.js
import React,{ Component } from 'react';
import ReactDom from 'react-dom';
require("../css/base.css");
class Frame extends Component {
constructor(props) {
super(props);
}
render() {
return <div className="frame">
<div className='header'>{this.props.contents}</div>
</div>
}
};
class Page extends Component {
constructor(props) {
super(props);
}
render(){
return <div className="homePage">
<Frame contents="longen1">this is comment </Frame>
<Frame contents="logen2"> this is another comment </Frame>
</div>
}
};
export default Page;
ReactDom.render(<Page></Page>,document.getElementById("wrap"));
如果你是写java的，或者c# C++的都应该会有亲切感吧。这就是后端
化的前台代码。
在这个过程中，如果找不到相应的组件，请手动安装
npm install xxx
如果只是开发打包或编译的时候需要，那么--save-dev即可，如果是上线后用，则--save
执行了save后，可以再package.json中看到相应的项，这比maven的pom方便多了。
最后一句
ReactDom.render(<Page></Page>,document.getElementById("wrap"));
实现了与开始的index.html对接
接下来，就是要学习react，ES6的语法了。
相关推荐
这是模块化开发、主流框架和最新版的ECMAScript语法规范的一个小demo 准备工作 安装 nodeJs 首先进入node官网，去下载最新版的nodeJs webpack 安装webpack npm install webpack -g 参数-g表示全局安装webpack，你在...
react-starter-kit 一个简单的最小化React入门工具... （React + Webpack + WebpackDevServer + ES6 + Babel + React热重装。） 以后需要添加更多模块。 ##安装npm install npm start 访问： http://localhost:3000/
这是一个建造webpack + react项目脚手架的简易教程，参照了的配置方式。每一个例子都有非常详细的建造步骤。 运行并启动项目 克隆项目到本地以后，选择要运行的示例进入到该项目路径下 安装： npm install 运行： ...
带有Webpack和ES6的简单ReactJS样板> npm install> npm start开启执照麻省理工学院
基于webpack + react + react-router + redux +更少+ flex.css + ES6的React版cnode社区 演示 下载 git clone https://github.com/lzxb/react-cnode.git cd react-cnode npm install (安装依赖模块) npm install...
基于React + Webpack + React-Router + ES6 + Redux + Int Design init 安装node.js https://nodejs.org/en/ 安装淘宝镜像 npm install -g cnpm 安装全局Webpack cnpm install -g webpack 安装package.json中的...
react-router@3.2.0 + webpack@4.41.2 + axios@0.19.0 + less@2.7.1 + antd@3.25.2交流QQ群：159697743项目运行git clone --depth 1 https://github.com/duxianwei520/react.git cd react (进入项目)npm install ...
前端: 使用 React 全家桶+ES6+Webpack 等技术 后端: 使用 Node + express + mongodb + socketIO 等技术 采用模块化、组件化、工程化的模式开发 运行环境 WebStorm+node+npm+mongodb数据库 项目技术(必填) 1) ...
BZ打算从从头开始，一步一步配置webpack，能够使用ES6+React组合开发，废话少说让我们一起来开始Webpack+ES6+React之旅。 可以在我的 中clone或者fork 当然你也可以使用本博文最后总结的部分或者从我的中获得，全部...
用于编写基于React的ECMAScript 2015（ES6）+ Redux + React Router + Webpack等的模板。 里面有什么？ 测试和断言 创建隔离成份的故事 示例 Webpack自动生成HTML和CSS 依存关系： Node.js >= v6; ...
生成您的React + Webpack + ES6游乐场 让我们开始： 确保您已安装哟： npm install -g yo 然后安装generator-reactpack： npm install -g generator-reactpack 在您的空白项目中，运行： yo reactpack 你会得到...
使用React、Redux、Webpack、Babel（ES6）搭建的TODOS（任务列表）项目示例（脚手架），Webpack按development和production环境配置好了有关热更新、postcss、hash命名（缓存方案）、UglifyJs等config。 INSTALL: npm...
前端: 使用 React 全家桶+ES6+Webpack 等技术 后端: 使用 Node + express + mongodb + socketIO 等技术 采用模块化、组件化、工程化的模式开发 运行环境 WebStorm+node+npm+mongodb数据库 项目技术(必填) 1) ...
可用脚本在项目目录中，可以运行：npm start 在开发模式下运行应用程序。 打开在浏览器中查看。 如果进行编辑，页面将重新加载。 您还将在控制台中看到任何棉绒错误。npm test 在交互式监视模式下启动测试运行程序。...
本地开发 git clone https://github.com/duuliy/react-project-template.git npm install or yarn npm start 访问(自动打开) http://localhost:8888/ 基本的 npm scripts 开始 npm start 打包 npm run build 升级...
reacjs + reflux 最佳实践前端架构:reactjs 创建组件reflux模型webpack打包百度echartsgrunt配置轻量任务less语法糖ES6 + babel解析器getting start本地开发npm installgrunt servegrunt serve会启动本地开发服务器 ...
小结放在前：这篇文章主要是为下一篇的react提前铺好路，webpack是一个前端资源模块化管理和打包工具，说白了就是方便我们管理自己的常用的一些代码，比如你开发中用到sass以及jade同时用到es6，开发时你不可能改动...
前端: 使用 React 全家桶+ES6+Webpack 等技术 后端: 使用 Node + express + mongodb + socketIO 等技术 采用模块化、组件化、工程化的模式开发 运行环境 WebStorm+node+npm+mongodb数据库 项目技术(必填) 1) ...
Webpack，ES6，Babel，React NPM软件包明细 npm install webpack -g ，能够执行webpack npm install webpack babel-loader ，用于ES6和JSX编译。 在本地安装webpack作为加载程序部。 npm install browser-sync ...
最小的webpack + react ES6入门模板。 包含的内容： 使用npm run任务脚本 编译器ES6至ES5 ， 和 通过和CSS支持 通过SVG，PNG，JPG，GIF和字体 安装 npm install npm run build 该软件包也位于NPM npm i webpack...