前端项目开发环境搭建
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安装jspmnpm 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的使用
相关文章推荐
- 前端框架Vue(15)——vue-cli 仿网易云音乐 Demo,环境搭建到开发 Vue 全家桶练手项目
- 从零搭建前端开发环境(零)——基础篇:1.npm、git及项目初始化
- 最新基于yeoman+angular前端项目的开发环境搭建
- Windows环境搭建VUE前端开发环境-项目新建与调试
- JBOSS安装与配置搭建本地项目环境(方便前端开发调式)
- Angular01 利用grunt搭建自动web前端开发环境、利用angular-cli搭建web前端项目
- 推荐前端开发使用的服务器环境开源项目 D2Server 可替代Apache
- 项目进度1:开发环境搭建
- 抛弃强大的TFS ,借助于BugTracker.NET + Visual Source Safe + SourceLink搭建项目开发环境
- Grunt+Livereload 搭建本地前端开发环境
- 用.Net打造一个移动客户端(Android/IOS)的服务端框架NHM(三)——搭建Android开发环境,用Hibernate生成Android项目的Model层
- Android基础之用Eclipse搭建Android开发环境和创建第一个Android项目(Windows平台)
- Cocos2d-x mac下eclipse开发环境的搭建, 创建跨平台的cocos2dx项目
- 抛弃强大的TFS ,借助于BugTracker.NET + Visual Source Safe + SourceLink搭建项目开发环境
- 前端环境搭建——代码开发测试部署
- [Windows Phone 8开发系统]1. 环境搭建与创建第一个项目!
- Struts2+Spring2+Hibernate3开发环境搭建及项目实例,泣血推荐,一步一步跟我做
- 快速构建C++项目工具Scons,结合Editplus搭建开发环境
- VC2010 + C++ + OpenCV 项目开发环境搭建 —— OpenCV 无法打开包括文件 找不到头文件问题
- 在windows下搭建ROR开发环境以及安装开源项目管理软件Redmine