Mac react环境搭建

网上的教程有好多,在这里不一一列举,我只介绍我今天安装成功的步骤

首先,在安装react之前要先配置好node

1.安装node

  在这里下载node的安装包https://nodejs.org/en/download/ 。我下载的是.pkg文件,直接双击安装就好

  node —v命令检验是否安装成功

  npm -v用来检测npm

2.通过npm使用react

  国内使用 npm 速度很慢,你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:

$ npm install -g cnpm --registry=https://registry.npm.taobao.org
$ npm config set registry https://registry.npm.taobao.org

一般这个时候就可以使用cnpm来进行操作,但是我的一直显示命令未找到。所以我放弃了使用cnpm,继续使用npm命令

npm配置taobao镜像的registry

npm config set registry https://registry.npm.taobao.org

然后直接用

npm install gulp less --save-dev

就是从taobao镜像拿包了

3.两种react开发环境构建

使用 create-react-app 快速构建 React 开发环境

create-react-app 是来自于 Facebook,通过该命令我们无需配置就能快速构建 React 开发环境。

create-react-app 自动创建的项目是基于 Webpack + ES6 。

执行以下命令创建项目:

$ cnpm install -g create-react-app
$ create-react-app my-app
$ cd my-app/
$ npm start

在浏览器打开http://localhost:3000/  盗用菜鸟教程一张图,因为我的已经更改了

项目的目录结构如下

my-app/
  README.md
  node_modules/
  package.json
  .gitignore
  public/
    favicon.ico
    index.html
  src/
    App.css
    App.js
    App.test.js
    index.css
    index.js
    logo.svg

之后我们可以修改src/App.js 文件代码来改变页面样式

reate-react-app 执行慢的解决方法:

在使用 create-react-app my-app 来创建一个新的React应用,在拉取各种资源时,往往会非常慢,一直卡在那:

fetchMetadata: sill mapToRegistry uri http://registry.npmjs.org/whatwg-fetch

可以看到资源还是使用了 npmjs.org,解决方法是换成淘宝的资源:

$ npm config set registry https://registry.npm.taobao.org
-- 配置后可通过下面方式来验证是否成功
$ npm config get registry

npm start来启动配置,那么自动会进入开发模式,此时热替换是处于自动激活状态

使用npm run build来编译得到生产环境,此时代码会被编译到build目录下,此时会自动将整个应用打包发布,它会自动使用Webpack控件进行优化与压缩

使用 Webpack-React-Redux-Boilerplate快速构建 React 开发环境

 其允许在一个项目中配置多个应用入口,同时支持开发模式、构建模式与库构建模式。同时笔者习惯不将webpack配置文件分成单独的dev与prod文件,而是合并到一个文件中。如果需要使用该模板,直接使用如下命令

git clone -b boilerplate https://github.com/wxyyxc1992/Webpack-React-Redux-Boilerplate/ # 克隆模板文件夹
sudo sh ./install.sh # 安装运行所需要的依赖项

在执行时要注意,进入到包含install.sh的文件夹下面,否则第二句命令可能会出现找不到的问题,

得到的模本文件夹主要由以下构成

├── README.md
├── README.zh.md
├── dev-config : 配置文件入口
│   ├── apps.config.js : 应用配置文件
│   ├── dev.html : 开发模式下使用的HTML文件
│   ├── devServer.js : 开发服务器
│   ├── eslint.js : ESLint配置文件
│   ├── template.html : 构建模式下推荐的HTML模板文件
│   └── webpack.config.js : webpack配置文件
├── install.sh 
├── package.json
└── src : 源代码目录
    ├── count : 某个应用
    │   ├── App.js
    │   ├── async_library.js
    │   ├── colors.js
    │   ├── count.html
    │   └── count.js
    ├── helloworld
    │   ├── App.css
    │   ├── App.js
    │   ├── helloworld.css
    │   ├── helloworld.html
    │   ├── helloworld.js
    │   └── logo.svg
    ├── library
    │   ├── foo.js
    │   ├── library.html
    │   └── library_portal.js
    └── vendors.js

其核心的关于应用的配置文件即apps.config.js,在模板项目中其配置为

module.exports = {

    apps: [

        //HelloWorld

        {

            id: "helloworld",

            title: "HelloWorld",

            entry: {

                name: "helloworld",

                src: "./src/helloworld/helloworld.js"

            },

            indexPage: "./src/helloworld/helloworld.html",

            compiled: true

        },

        //Count

        {

            id: "count",

            title: "Count",

            entry: {

                name: "count",

                src: "./src/count/count.js"

            },

            indexPage: "./src/count/count.html",

            compiled: true

        }

    ],



    //开发服务器配置

    devServer: {

        appEntrySrc: "./src/helloworld/helloworld.js", //当前待调试的APP的编号

        port: 3000 //监听的Server端口

    },



    //如果是生成的依赖库的配置项

    library: {

        name: "library_portal",//依赖项入口名

        entry: "./src/library/library_portal.js",//依赖库的入口,

        library: "libraryName",//生成的挂载在全局依赖项下面的名称

        libraryTarget: "var"//挂载的全局变量名

    }

};

开发模式

开发模式下主要读取apps.config.js中的devServer配置,主要是可以配置调试的入口JS文件与开发服务器监听的端口号。开发模式下会自动使用dev.html作为默认的HTML文件传输到浏览器中展示,譬如在模板项目中是将helloworld项目作为当前正在开发的项目,切换到项目目录下使用npm start,即可开启开发模式,此时在浏览器内打开http://localhost:3000即可看到运行效果

构建模式

对于应用中存在的多应用入口,主要是在apps.config.js中的apps下进行配置的,一个典型的应用配置为:

 id: "helloworld", //编号

            title: "HelloWorld", //生成的HTML文件中的标题

            entry: {

                name: "helloworld", //用于webpack的入口名

                src: "./src/helloworld/helloworld.js" //入口文件地址

            },

            indexPage: "./src/helloworld/helloworld.html", //HTML模板文件地址

            compiled: true //是否进行编译

因为我只设置到这里。剩下的东西可以自己探索

4.运行别人的react项目

从git clone或者直接复制到某一个路径下,用webstorm打开,在webstorm的终端下面输入

npm install

命令,相当于将项目载入环境;

之后输入

node server

开启服务器,就会自动打开网页显示项目内容。

但是我遇到的问题是,后台报错,样式消失  ,,,,,node-sass没有安装上。。。

于是在终端输入

npm install -g cnpm --registry=https://registry.npm.taobao.org
npm install --save-dev node-sass

或者

npm i node-sass -D

安装好node-sass重新开启服务器

node server

就OK啦

 


 

posted @ 2017-05-10 17:31 mi_lu 阅读(...) 评论(...) 编辑 收藏