从零开始的项目创建生活
从零开始的项目创建生活
一：搭建架子
创建一个项目需要依赖很多文件，为了便于管理所以用nodejs里面的npm包来管理
1、项目初始化
    使用命令npm init
创建一个初始文件package.json，这个文件定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）。
2、项目依赖包的安装
    首先使用以下命令安装四个包
npm install --save react react-dom babelify babel-preset-react
以及为了使用es2015而安装的包
npm install babel-preset-es2015
为了使这些依赖包的信息能够在我们的package.json文件里显示，所以我们要加上 --save,当然如果你是mac或者linux用户为了避免权限问题，加上sudo。
3、自动化工具webpack
    我们使用的很多模块是不能直接使用的，要经过一定的处理才能拿来用，而处理这些问题的依赖包实在是太多，很麻烦，所以webpack应运而生。
    WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。
下面我们说一下怎么安装及使用webpack：
a、首先全局安装webpack，输入命令sudo npm install -g webpack
b、再装个nodejs的一个服务器，用于服务webpack的包，命令sudo npm install -g webpack-dev-server
c、以上是在全局安装，所以我们在自己项目目录下去掉-g在安装一次，注意加上--save，以便记录在package.json里面
d、安装完之后，建立一个webpack.config.js，然后配置一下里面的信息
e、当在使用webpack时，可以直接使用webpack执行一次，就可以得到你想要的结果。当然每当你有修改时都需要从新执行一遍webpack，这会很不方便，所以我们可以使用webpack --watch，进行实时监听
f、如果想要浏览器实时刷新的话，就要用到webpack-dev-server了，输入命令webpack-dev-server，它会自动给你部署一个路径，然后你登进去就可以看到实时更新的页面了,当然如果你想修改一下它部署服务器的地址的话，你需要输入# webpack-dev-server --contentbase src --inline --hot
g、需要安装的包有如下
"babel-loader": "^7.1.2",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babelify": "^7.3.0",
"prop-types": "^15.6.0",
"react": "^16.0.0",
"react-dom": "^16.0.0",
"react-mixin": "^2.0.2",
"webpack": "^3.8.1",
"webpack-dev-server": "^2.9.3"
二：github项目管理
1、GitHub项目管理
我们一般在网上管理自己所写的项目的时候，一般都会选择GitHub社区，而在GitHub上面进行项目管理的时候，我们可能有很多小问题都忽略了。往往一个项目都需要注意以下几个东西：
README.md 用于简单介绍项目，以及项目的使用方法
我们一般把项目整体架构的介绍，还有项目的使用及维护方法都放在README.md文件下面，此文件是用Markdown语法进行书写
.gitignore 用于限制你上传的文件
当我们在使用git命令把本地仓库的代码上传的远程仓库时，有些东西是不需要一并上传的，例如node_modules文件夹（只要有package.json文件就可以随时下载包），还有一些操作不当的错误文件等。
LICENSE 可以限制别人使用你的项目
但遵循GitHub社区开源的思想，一般我们都会把权限开的最大，让大家一起使用讨论
EditorConfig 定义和维护一致的编码风格
可以让你为这个项目提供的代码按照规范书写
ESLint 帮助我们检查Javascript编程的语法错误
让我们在编程过程中检查错误，而不是执行的时候才知道错误
package.json 整个项目的配置中心
它定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）
src 源码目录
我们开发的源代码一般都放在这个文件夹下面
