前端项目开发环境搭建

前端项目开发环境搭建

1、nodeJS安装

我是Mac用户所以使用的是homebrew安装的nodeJS

安装的语句是

 brew install node

安装完成后运行

node -v        //查看node的版本，我的版本是v7.4.0

2、安装 flow、pcre、watchman

brew install flow 

brew install pcre

brew install watchman

brew list //查看brew已经安装了哪些软件

提示：详细内容请看homebrew的博客介绍

3、在github上创建一份我们的项目

【1】创建一个名为：mywebproject 的代码仓库

会得到以下的仓库地址

https://github.com/summerdfy/mywebproject.git

【2】进入到要创建项目的目录后执行

echo“＃mywebproject”>> README.md 

git init 

git add README.md 

git commit -m“first commit” 

git remote add origin https://github.com/summerdfy/mywebproject.git

git push -u origin master

执行完以上的操作项目已经同步到远程仓库中了。

【3】、github的基本使用教程

github
这个教程是简单教程入门使用后期有更多的使用技巧

4、安装babel

babel可以把项目中的ES6语法转换为ES5的语法格式

npm install -g babel //在全局环境下安装

cd 项目目录

npm init  //创建Package.json文件

npm install --save-dev babel-core 

npm install --save-dev babel-cli

接下来开始配置babel

一、配置文件.babelrc

Babel的配置文件是.babelrc，存放在项目的根目录下。使用Babel的第一步，就是配置这个文件。

{
  "presets": [],
  "plugins": []
}

presets字段设定转码规则，官方提供以下的规则集，你可以根据需要安装。

    # ES2015转码规则
    $ npm install --save-dev babel-preset-es2015

    # react转码规则
    $ npm install --save-dev babel-preset-react

    # ES7不同阶段语法提案的转码规则（共有4个阶段），选装一个
    $ npm install --save-dev babel-preset-stage-0
    $ npm install --save-dev babel-preset-stage-1
    $ npm install --save-dev babel-preset-stage-2
    $ npm install --save-dev babel-preset-stage-3

然后，将这些规则加入.babelrc

  {
    "presets": [
      "es2015",
      "react",
      "stage-2"
    ],
    "plugins": []
  }

二、基本使用

# 转码结果输出到标准输出
$ babel example.js

# 转码结果写入一个文件
# --out-file 或 -o 参数指定输出文件
$ babel example.js --out-file compiled.js
# 或者
$ babel example.js -o compiled.js

# 整个目录转码
# --out-dir 或 -d 参数指定输出目录
$ babel src --out-dir lib
# 或者
$ babel src -d lib

# -s 参数生成source map文件
$ babel src -d lib -s

5、安装jspm项目包管理工具

通过npm安装jspm

npm install -g jspm

在项目中使用

jspm init //项目中创建一个文件夹和一个config文件

6、安装browser-sync来监视文件变动

安装教程

常用代码：监视整个项目

browser-sync start --server --no-notify 
--files 'index.html,./**/*.js,./**/*.html,./**/*.css'

7、webpack2.0的使用

简易教程

到这里差不多一个web项目的脚手架搭完了。学习搭建环境我花了整整1天时间，还有很多东西不会。以后项目中慢慢学习。

使用的工具有node , npm , babel , jspm,webpack2.0 , git,browser-sync 等。
后面还会有react、和React-native的使用