首页 > 代码库 > 搭建react项目的环境

搭建react项目的环境

 
 
 
 注册
 添加关注
技术分享作者 小黄人大侠 2016.03.25 17:27*
写了3090字,被7人关注,获得了5个喜欢

搭建Amazeui+react+webpack+webstorm开发环境

字数2549 阅读3292 评论25 

来段广告

你有没有遇见过垂直居中的问题?有没有听说过flex弹性布局?没听过的赶紧点了解Flex布局,看看flex布局是有多么强大!!!还在发愁flexbox布局不兼容最新的浏览器?点击兼容IE9+、UCBroswer的FlexLayout,获取兼容性的flexlayout react组件。

源起

最近在学习Amazeui-react的开发,发现react着实是一个好东西,但是蛋疼的是webpack这个东西好难配置,稍不注意就会导致自动编译失败,会出现一堆的问题,下面就请跟我一起从零开始学习React+webpack配置,并且如何在webstorm中很好的运用它们。

准备

1、下载webstorm11和nodejs。
下载太慢?直接百度云打包分享吧~~windows mac osx

开始

由于我的电脑的MacBook不是windows,因此可能安装和操作过程会有略微差异,但是差异不大,下面操作基本通用,不通用的我会指明。或者下面留言即可。

  1. 首先,确定你已经了解了react是干什么的,对react还不了解的请移步这里:react快速入门,我大体总结下吧:你就直接把react理解成能够用js实现web前端的组件化开发的一个框架就好了,它通过虚拟DOM来简化DOM操作提升性能,同时更好的实现模块化封装。再深了也没必要说了。
  2. 其次,你还得知道webpack是干什么的,对webpack不了解的请移步这里:webpack官网。这个网站我没有发现偏官方的中文站点,但是CSDN上应该有很多相关的教程。webpack是一个构建工具,能够把所有的静态资源进行编译打包,比如.js、.css、.png、.less等等吧,反正只要是静态的,不是什么php、jsp之类的动态网站文件都能打包。通过它统一管理资源和模块。
  3. 再次,你还得知道点nodejs的知识,这个网站nodejs中文教程会告诉你nodejs干什么用,都有哪些api。nodejs是一个在服务器端的高性能javascript框架,能够快速处理高并发的请求。它主要用的就是回调原理,通过它提供的api可以实现一些web请求处理。其中,nodejs包含了一个npm,全称是node package manager,说白了就是node项目的包管理器,通过npm命令,我们可以使用成千上万的javascript框架。
  4. 最后,就是你得会用webstorm了。这个被称为javascript开发神器IDE,能够大大提升你开发web前端的效率。
    综上,我觉得能进入这篇博客的人想必肯定早就知道以上几个工具是干什么用的了,否则还进来干吗?串门啊?

入门

  1. 安装完毕上述几个工具之后,请打开你的命令行工具:windows 按下Windows符号键+R,输入cmd,会弹出命令行工具;mac直接在Launchpad中查找终端即可,Linux跟mac没啥区别,自己找终端去,在下面我们姑且统一称之为命令行。
  2. 首先在命令行中输入:npm -v ,看看是否有版本号出现。如果出现了,证明你的nodejs安装成功了,不需要配置环境变量。如果没出现,那么你还得把环境变量配置一下。不过nodejs默认是给你配置好环境变量的。
  3. 配置npm的代理地址:(由于伟大的墙的原因,会导致下载包很慢很慢~~~)
    npm config set registry https://registry.npm.taobao.org
  4. 下面进入正轨了啊!!!提神!注意!看这,看这~~
  5. 启动webstorm,初次使用的话会让你导入以前的配置。如果是以前有配置文件就导入,没有就选择初次使用那一项。然后选择,create new project,建立一个新的工程。工程名就叫做:react_webpack_test吧。
  6. 点击OK,进入界面。然后打开webstorm的首选项设置(windows是File-settings),在Languages & Frameworks的JavaScript一栏选择JSX Harmony,点击OK。
  7. 重新打开命令行,依次输入
    sudo npm install webpack webpack-dev-server babel  -gsudo npm install react react-dom babel-loader less-loader css-loader style-loader url-loader file-loader babel-preset-es2015 babel-preset-react --save-dev
    安装结果会显示一些WARN,无视!但是千万别有Error。
  8. 第一条命令是全局安装,模块会安装在/usr/local/,注意全局安装在mac/linux系统需要sudo然后输入密码,而windows不需要sudo哦~~第二条会安装在~/node_modules/下面。

    参数解释:
    -g:允许包全局使用
    --save-dev:将依赖信息写入package.json的devdependencies。
    安装的每个组件解释:
    babel:能将es6语法解析成es5(什么是es??ECMAScript*6*入门自己看去,js是它的子集,说白了就是最新的javascript语法),以前是使用jsx-loader来解析着,现在直接用babel替代就行了。
    babel-preset-es2015和babel-preset-react:让babel支持es2015语法和jsx语法的两个预设值。
    webpack:这个还用说吗?
    react-dom:依赖于react,现在都是通过ReactDOM.render()方法来渲染而不是React.render(),facebook官方已经说了。
    webpack-dev-server:webpack开发服务器,帮助开发者实时监控webpack项目的文件更改并反映到浏览器上。这样你就能实时地进行预览啦~
    babel-loader css-loader babel-loader style-loader url-loader file-loader:几种webpack需要用到的加载器,方便解析css、es6/jsx、和其他静态文件。
    小提示:
    全局安装支持直接在命令行中启用安装包的命令,例如:你安装了webpack,那么在命令行输入webpack就会出现相应执行,但是非全局不支持使用这个命令的哦。

  9. 接下来,再打开webstorm(最好这两个工具你都别关~)。在刚才那个react_webpack_test的工程中创建一个文件,文件名为webpack.config.js,然后在里边写上下面的代码:
    var webpack=require(‘webpack‘);var commonsPlugin=new webpack.optimize.CommonsChunkPlugin(‘common.js‘);module.exports={entry:{index:‘./src/js/entry.js‘},output:{    path:‘dist‘,    filename:‘bundle.js‘},module:{    loaders:[        {            test:/\.css$/,            loader:‘style-loader!css-loader‘        },        {            test:/\.jsx?$/,            loader:‘babel‘,            exclude: /node_modules/,            query:{                presets:[‘es2015‘,‘react‘]            }        },        {            test:/\.(png|jpg)$/,            loader:‘url-loader?limit=8192‘        },        {            test:/\.less$/,            loader:‘style-loader!css-loader!less-loader‘        },        {            test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,            loader: "url-loader?limit=10000&mimetype=application/font-woff"        },        {            test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,            loader: "file-loader"        }    ],    plugins:[        commonsPlugin    ]},resolve:{    root:‘‘,    extensions:[‘‘,‘.js‘,‘.json‘,‘.less‘],    alias:{        AppStore:‘js/stores/AppStores.js‘    }}}
    然后在当前工程目录创建一个src文件夹,在src里面创建一个js文件夹,在js文件夹中新建一个entry.js文件,文件内容如下:
    var React=require(‘react‘);var ReactDOM=require(‘react-dom‘);ReactDOM.render(<div>Hello world!</div>, document.getElementById("test"));
    接下来再在当前工程目录中新建一个dist文件夹,dist文件夹中新建一个index.html文件。内容如下:
    <html><meta charset="utf-8"><title>React webpack test</title></head><body><div id="test"></div></div><script type="text/javascript" src=http://www.mamicode.com/"./bundle.js" charset="utf-8"></script></body></html>
    最后一步,最后一步了哦~~加入package.json文件,使之成为一个可以用npm命令执行的工程。
    {"name": "react_webpack_test","version": "1.0.0","description": "just webpack and react hello world project!","scripts": {"build": "webpack --progress --profile --colors","watch": "webpack-dev-server --port 63340 --content-base ./dist/","test": "echo \"Error: no test specified\" && exit 1"}}
    其中最重要的是script标签。
    接下来我们打开webstorm的Terminal功能(在IDE底部),在里面输入
    npm run build
    然后,在你的Terminal里面会显示如下的东东
    > react_webpack_test@1.0.0 build /Users/你的工程所在目录/react_webpack_test> webpack \--progress \--profile \--color  2m0ms op1ms optimiz12ms emitHash: 292766b53fb3969afd55Version: webpack 1.12.14Time: 5109msAsset    Size  Chunks             Chunk Namesbundle.js  676 kB       0  [emitted]  index\+ 159 hidden modules
    如果里面出现了红色的Error那么就说明你的工程配置还有一些问题,如果OK的话,打开浏览器,在里面运行你的dist/index.html文件,看看是否有:hello world!输出
  10. 实时调试你的代码~
    在webstorm的Terminal中输入npm run watch,然后会在里面输出一堆日志,日志中不能出现红色的Error,同时会输出下面两句:
    http://localhost:63340/webpack-dev-server/省略这部分……webpack: bundle is now VALID.
    输入:http://localhost:63340/webpack-dev-server/,应该就可以看到你想要的结果,结果如下:
    插入图片哦
  11. 这个就是用来充数的,光棍节快乐!!

进阶

喝杯茶~
……
 

到了这可以说你的项目就已经完成了,如果你想跟我一样使用Amazeui-react组件,那么就继续跟我这样继续下去吧~

  1. 安装Amazeui-react
    npm install amazeui amazeui-react --save-dev
  2. 修改./src/js/entry.js文件,替换成以下代码:
    var React=require(‘react‘);var ReactDOM=require(‘react-dom‘);var AMUI=require(‘amazeui/dist/css/amazeui.min.css‘);var AMUIReact = require(‘amazeui-react‘);var button=( <AMUIReact.Button>这是一个按钮</AMUIReact.Button>);ReactDOM.render(button,document.getElementById("test"));
  3. Ctrl+S,保存当前代码,查看你的浏览器http://localhost:63340/webpack-dev-server/页面有没有变化~~

下面是我的测试工程链接,自己下载下来拿去用吧.
react_webpack_test

整整连写带测试折腾了我一下午,为了保证每一处写的没有疏漏,我现卸载掉我电脑上的webstorm和nodejs~~

     推荐拓展阅读
     
     著作权归作者所有

    如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

    ¥ 打赏支持 
    技术分享
     喜欢
     5
    分享到微博 分享到微信 
    更多分享

    喜欢的用户

    • 技术分享 秋夜已凉2016.09.12 13:42
    • 技术分享 Remilia2016.09.12 02:20
    • 技术分享 摔不碎的玉2016.07.26 09:48
    • 技术分享 BugFucker2016.06.04 13:29
    • 技术分享 _yuchen震2016.04.18 08:59
    25条评论 ( 按时间正序· 按时间倒序· 按喜欢排序 )添加新评论
    技术分享

    _yuchen震

    2 楼 · 2016.04.18 15:02

    请问一下为什么webpack. config. js里不用require (‘path‘)
    还有请问一下package. json里的watch里 /.dist/是什么作用的呢??????

    喜欢(0)回复

    小黄人大侠: @_yuchen震 您好,webpack.config.js 里面用到了require,开头这句,var webpack=require(‘webpack‘);所有的nodejs依赖如果需要引用外部类,require是不可避免的。watch里的./dist/指的是webpack-dev-server 监听的目录,一直监听当前位置下地dist目录,可以保证当dist目录下有文件改动时实时的从浏览器中能够刷新出来,具体webpack-dev-server的用法请查看http://webpack.github.io/docs/webpack-dev-server.html,他对于webpack并不是必须的,只是辅助开发实时查看预览效果而已。

    回复2016.04.19 10:24

    _yuchen震: @小黄人大侠 好的谢谢博主回答~~ 请问还有木有AmazeUI+react+webpack的项目例程呢,希望能像博主学习一下 技术分享 技术分享

    回复2016.04.19 11:13

    _yuchen震: 能请问下AMUIReact的模态框怎样写吗? 
    >var modal = <AMUIReact.Modal title="Amaze UI Modal">这一个 Modal 窗口。</AMUIReact.Modal>;

    module.exports =React.createClass ({
    render: function() {
    return (
    <AMUIReact.ModalTrigger modal={modal}>
    <AMUIReact.Button amStyle=‘primary‘>打开 Modal 窗口</AMUIReact.Button>
    </AMUIReact.ModalTrigger>
    );
    }

    });

    这样写只能展示按钮,没有模态框0 0

    回复2016.04.20 13:20
     
     添加新回复
    技术分享

    hstonel

    3 楼 · 2016.05.17 17:58

    技术分享 学习,谢谢

    喜欢(0)回复
    技术分享

    霓源阁

    4 楼 · 2016.05.21 20:57

    @小黄人大侠 博主,我是后端转前端的,我用的一直是Intellij IDEA,然后我看了一些前端的教程,好多都是自动化的东西 yeomen,grunt,还要webpack等等,但是我觉得Intellij IDEA或者webstorm貌似都能替代他们吗?我一直很疑惑,请博主帮忙解答。
    还要博主写的文章我很喜欢,方便留个联系方式吗 qq或者邮箱?

    喜欢(0)回复

    小黄人大侠: @霓源阁 不能说代替,就像nodejs不能指望完全代替java、php一样,我们必须知道这些技术擅长的领域,只需要取其所长即可。而且我觉得你可能说的是不是这些开发工具替代你以前用的开发工具?开发工具永远是朝着更加智能,功能强大和方便发展,多学习新的东西会不断提高自己的开发效率~

    回复2016.05.22 21:19
     
     添加新回复
    技术分享

    708d0f26b105

    5 楼 · 2016.05.24 10:28

    webstorm是自动保存的 但是自动保存 那react的自动刷新就不能用

    喜欢(0)回复

    小黄人大侠: @708d0f26b105 你可以把自动保存功能关闭,设置成ctrl+S快捷键手动保存。

    回复2016.05.24 15:07

    小黄人大侠: @708d0f26b105 我这个好像发错了,react自动刷新是使用的webpack-dev-server来测试的~

    回复2016.06.17 22:00

    aafff584fec2: 设置成手动保存以后,再命令行输入npm run watch 只能检测一次,切换界面后就不起作用了

    回复2016.07.19 10:09
     
    还有 3 条评论, 展开查看 添加新回复
    技术分享

    JYoung

    6 楼 · 2016.07.18 14:00

    特意注册了个账号来感谢一下,上午搞了半天没搞明白配置,还好群里的人推荐查一下这篇文章啦~ 现在已经可以愉快的撸码啦~

    喜欢(0)回复

    小黄人大侠: @JYoung 呵呵,不用客气,你的诚意已收到,好好地享受webpack和react给你带来的乐趣吧~

    回复2016.07.20 14:20
     
     添加新回复
    技术分享

    AlbertBreeze

    7 楼 · 2016.07.27 11:11

    生成的bundle.js文件有700多KB大小,有办法进行压缩么?

    喜欢(0)回复

    小黄人大侠: @AlbertBreeze 关于压缩请去webpack官网查看code spliting部分。

    回复2016.07.27 11:18
     
     添加新回复
    技术分享

    vargent

    8 楼 · 2016.08.22 09:59

    按照你这个配置,还是没有配置成功,找不到webpack 本人新手

    喜欢(0)回复

    小黄人大侠: @vargent webpack没装成功

    回复2016.08.24 14:39

    小黄人大侠: @vargent 使用全局安装 npm install -g webpack

    回复2016.08.24 14:40
     
     添加新回复
    技术分享

    Chozo

    9 楼 · 2016.09.11 23:42

    Error: Cannot find module ‘webpack‘
    这是什么情况
    Failed at the react_webpack_test@1.0.0 build script ‘webpack --progress --profile --colors‘.还有这个
    我也是mac出错了

    喜欢(0)回复

    小黄人大侠: @Chozo 你没有安装webpack,使用全局命令:npm install webpack webpack-dev-server -g --save-dev 安装一次即可

    回复2016.09.12 11:22
     
     添加新回复
    技术分享

    秋夜已凉

    10 楼 · 2016.09.12 13:43

    这个就是用来充数的,光棍节快乐!! 可见作者是个大神,写的很好!??

    喜欢(0)回复

    小黄人大侠: @秋夜已凉 ??

    回复2016.09.12 19:30
     
     添加新回复

    登录后发表评论

    搭建react项目的环境