站内搜索:
首页 >> 前端 >> 内容
react框架的搭建教程

时间:2018/1/20 11:18:17

框架的流程:

1、下载安装Node.js

2、安装webpack(含服务器等) npm install webpack webpack-dev-server babel -g

注意:-g表示第一条命令是全局安装

3、添加package.json文件(目前只知道是放一些项目的描述信息),进入项目目录

命令:npm init

4、添加库文件(–save-dev:将依赖信息写入package.json的devdependencies),babel-polyfill可解决部分es6兼容问题

例子:npm install react react-dom –save-dev(多个插件空格分开)

所有库如下:

webpack

react

react-dom

babel-loader

less-loader

css-loader

style-loader

url-loader

file-loader

babel-preset-es2015

babel-preset-react

react-router

redux

react-redux

redux-devtools

redux-thunk

babel-polyfill

第三方UI

material-ui

react-tap-event-plugin

react-swipeable-views

5、跟目录新建webpack.config.js配置文件

6、打包:node进入你的项目跟目录执行打包命令:webpack –config webpack.config.js

ps:webpack.config.js配置如下

var webpack=require('webpack');  
module.exports={  
    devtool:'#eval-source-map',  
    //入口文件,多个的话将按顺序执行  
    entry:[  
        'babel-polyfill','./App/js/index.jsx'  
    ],  
    output:{  
        path:'App',             //打包后文件的存放路径  
        publicPath:'/App/',     //服务器根路径  
        filename:'bundle.js'    //打包后的文件名  
    },  
    module:{  
        loaders:[  
            {test:/\.css$/,loader:'style-loader!css-loader'},  
            {test:/\.less$/,loader:'style-loader!css-loader!less-loader'},  
            {test:/\.js?$/,loader:'babel',exclude: /node_modules/},              
            {  
                test:/\.jsx?$/,  
                loader:'babel',  
                exclude: /node_modules/,  
                query:{  
                    presets:['es2015','react']  
                }  
            }  
        ]  
    },  
    watch: true, //观察模式,每次修改保存webpack.config.js中引用文件,bundle.js的文件会自动更新  
    //指定可以被 require 的文件后缀,比如 Hello.js 这样的文件就可以直接用 require(./Hello) 引用  
    resolve:{  
        root:'',  
        extensions:['','.js','.jsx','.json','.less','.css']  ////定模块的后缀,这样在引入模块时就不需要写后缀了,会自动补全  
    }  
}  

  • 上一篇:CSS3filter与opacity解析
  • 下一篇:Canvas图形变换实例讲解
  • 返回顶部