您的位置:首页 > Web前端

前端项目开发环境搭建

2017-02-25 16:14 573 查看

前端项目开发环境搭建

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的使用
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
相关文章推荐