运用yeoman安装配置react开发环境

责编:menVScode 2017-06-18 23:17 阅读(1047)

        首先,要确保电脑上有安装过nodejs,没有安装的可以到这个网站(https://nodejs.org/en/download/),自行下载安装即可。

        如果有人会webpack构建工具的话,可以用webpack来进行搭建,具体步骤可以查看这篇文章:http://www.menvscode.com/detail/594b7a9c6f402968fec7cd95

        yeoman是前端脚手架搭建工具,对于没有学过webpack等构建工具来说,使用yeoman搭建react开发环境要来的简单多,可以不用自己配置,直接就能开发了。yeoman的官网:http://yeoman.io/

        yeoman安装步骤(先建立好项目文件夹)

        1、打开命令行安装:npm -g install yo   可以通过yo --version命令查看当前yeoman的版本。

        2、打开命令行安装:npm -g  install  generator-react-webpack

        3、打开命令行安装:yo react-webpack mypro  (mypro是项目的名字,进入项目文件夹安装)

QQ截图20170618230104

        这就是运行上面的代码的结果,其中还有类似于npm init的配置;第一个是填写你的项目名字,默认就是你的建立的项目文件夹的名字;第二个是样式格式的选择,有css、less、sass可供选择;第三个是解析css的选y(Yes)即可。

        选好后,他自动会在你项目文件的根目录下创建很多的文件。

        再然后呢,又要下载安装很多文件,如下图显示,这里估计要花点时间的。

QQ截图20170618230653

        3、上面步骤成功后,执行 npm start

QQ截图20170618233012

        如上图所示就说明是react开发环境已经配置成功了,可以将http://localhost:8000/webpack-dev-server/放到浏览器跑一下了。

        我们来看看项目文件夹中自动安装了那些文件:

QQ截图20170618233453

        webpack.config.js:是webpack的配置文件;

        start.bat:直接双击弹出指向当前项目问价路劲的命令行窗口;win+R则是自动指向c盘的;

        server.js:nodejs加载8000端口的;

        package.json:通过npm install package命令安装的包,都会显示在这里的;devDependencies:是开发模式;dependencies:是生产模式;两者区别是前者是发布后不需要的包,后者是发布后需要用到的包。

        .eslintrc:是检测语法的作用;

        node_modules:package.json里面成功安装成功的包文件,都放在这个文件夹下面;

        src/dist:src是编译前的文件夹,dist是编译后后的文件夹;

        src/index.js:index.js是我们最后输出的文件

        参考:https://github.com/react-webpack-generators/generator-react-webpack#readme

标签: yeoman react reactjs
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码