1、node安装
首先,需要node环境支持,如果你还没有安装node.js,请移步nodejs官网。
2、初始化项目
1 | npm init |
回车即可 到最后,你的项目根目录会多一个package.json的文件。
3、添加项目依赖
接下来,我们打开package.json文件,给项目添加依赖包。当然,最简单的方法便是直接修改package.json文件,然后通过npm install安装依赖即可,但是考虑到依赖包的不断更新迭代,或许今后的不久就已经不是当前版本,为了能保证,我们每个看到这边文章的童鞋都是用的最新依赖包,我们直接通过npm install ** –save-dev方式来安装我们依赖包。
首先,我们来安装dependencies:
1 | npm install --save react react-dom lodash |
按理来说,上面的命令并没有任何问题,但是小编却在这里遇到一个坑,那就是项目取名为react,然后再安装react的时候被拒绝
当然,解决方法就是重新命名,为了避免不必要的麻烦,还是推荐小伙伴们不要把项目名称命名成你要安装的包名,譬如:react,webpack等等。
泪的教训:如果你遇到上述的错误,请删掉该项目重新新建一个项目,因为无论如何也还是会报这个错误,包括重启也是于事无补。
再次安装react的时候,切忌一定要安装到生产依赖。
1 | npm install --save-dev react |
不出意外,应该是可以了,接下来我们就可以安装其他依赖。
1 | npm install babel babel-core babel-loader babel-preset-es2015 babel-preset-react css-loader style-loader react-router webpack webpack-dev-server |
1 | npm install react-dom lodash --save |
最后提醒一下,webpack和webpack-dev-server这两个包需要全局安装。
1 | npm install -g webpack webpack-dev-server |
到这里我们的依赖包就安装完毕。
以下便是package.json的最终代码:
1 | { |
4、配置webpack
新建一个webpack.config.js文件。
1 | var webpack = require("webpack") |
以上便是webpack的基本配置,具体的webpack配置以后会单独介绍。
5、项目文件
index.html
1 |
|
index.js
1 | import React from 'react' |
这个时候,一个简单的hello word就已经完成,运行如下命令
1 | webpack-dev-server |
使用浏览器打开http://127.0.0.1:8080就能看到hello world。这里的webpack-dev-server可以实时监测文件修改,已实时观看最终效果。
但是每次要预览效果,我们要输入这么一大串,难免有所不便,
打开package.json文件,找到scripts结点,更改如下所示:
1 | "scripts": { |
这样,我们就只需要在命令行中输入:
1 | npm run dev |
当然,如果你嫌上面的步骤太过繁琐,你可以直接下载github上面的代码,然后直接运行:
1 | npm install |
文/Swimly(简书作者)
原文链接:http://www.jianshu.com/p/0d7a70e39d2e
著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”。
- 本文作者: 林杰
- 本文链接: http://linjiefe.github.io/2016/10/20/react-环境搭建/