前端开发环境

Web SDE

TIP

最后更新时间:2019年09月5日

字数:23386

忍别人所不能忍的痛,吃别人所别人所不能吃的苦,是为了收获得不到的收获。

Web软件开发环境(Web Software Development Environment,Web SDE)

程序员到了一家新的公司,上班第一天一般工作都是熟悉安装公司团队开发环境,今天给大家介绍一下,前端基础开发环境的配置。

当然,这里只是说一些必须或者是极大概率用到的,因为每个公司开发环境都可能有一些不一样的地方,我们可以根据实际情况进行相关修改。

基本入职须知

  • 安装开发环境

    • 统一的系统环境
    • 统一的开发编辑器
  • 代码管理

    • git
    • gitlab
    • svn
    • source tree
  • 开发规范

    • 统一的技术框架
    • 代码管理规范
    • 代码编写规范
    • 开发文档
  • 开发须知

    • 测试服务器
    • 接口管理
    • 公司项目开发部署流程
    • bug测试修改流程

TIP

建议上面的流程都熟悉一下,不知道的可以百度一下

大家针对每家公司的具体情况再进行安装一些必要的软件

下面的软件大家按照顺序安装就可以了

开发工具

Visual Studio Code

开源 免费 功能强大 强力推荐

TIP

  • Visual Studio Code是我们Electron开发的(HTML + CSS + JS)

  • 使用Visual Studio Code 一定要记得安装插件!安装插件!安装插件!(参考小峰哥推荐的插件列表)

  • Windows版本下,添加右击在Visual Studio Code中打开,可以快速打开项目哦

webstorm

功能强大 收费

TIP

WebStorm是收费软件!激活汉化等教程请自行百度!

sublime text

代码编辑器 可配置程度高

Sublime Text 2是收费软件,但可以无限期试用

TIP

Sublime Text 也是通过各种配置插件来实现许多强大的功能的,如果想优雅的使用好它,一定要多适当的安装一些插件!

浏览器

Chrome

webkit 免费 功能强大 首选

TIP

  • Chrome通过安装一些插件可以帮助我们在工作中解决很多问题,具体看后面教程

  • 前端开发者使用的调试工具基本就是在Chrome和Firefox之间选择了,小峰哥还是推荐Chrome!

Chrome推荐插件

Allow-Control-Allow-Origin

vue-devtools

React Developer Tools

Axure RP Extension for Chrome

  • 使用谷歌浏览器查看原型图
  • 教程

TIP

  • Axure RP Extension for Chrome插件需要配置允许访问文件网址
  • vue-devtools插件需要配置允许访问文件网址
  • React Developer Tools插件需要配置允许访问文件网址

Firefox

开源 免费 功能强大

TIP

Mac OS 系统上面配置代理抓包,推荐使用Friefox!Chrome配置代理实在是太麻烦了!

NodeJs

  • 介绍:
    • Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境
    • Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型,使其轻量又高效
    • Node.js 的包管理器 npm,是全球最大的开源库生态系统
  • 官网下载地址
  • Nodejs官网
  • Nodejs中文网
    • 与官方文档同步的中文文档
  • 版本
    • Windows
    • Mac OS
    • Linux
  • 安装:
    • Windows:
      • 图形界面安装,下一步下一步即可
    • CentOS安装教程
      • http://www.xuefeng666.com/CentOS/notes/#node-js%E9%83%A8%E7%BD%B2
  • 查询是否安装成功:
    • 命令行输入:node -v ,显示版本即可

TIP

  • NodeJs内置npm,他们安装是结合在一起的

  • 推荐安装稳定版本,不要安装最新版

  • 推荐使用Nvm管理Nodejs,这样可以安装多个Nodejs版本,并且可以快速来回切换

npm

切换淘宝镜像源

  • 临时使用
npm --registry https://registry.npm.taobao.org
1
  • 持久使用
npm config set registry https://registry.npm.taobao.org
1
  • 配置后可通过下面方式来验证是否成功
npm config get registry
1

找到taobao关键字即可

  • 通过cnpm使用
npm install -g cnpm --registry=https://registry.npm.taobao.org
1
  • 使用示例
cnpm install express
1

TIP

  • 国内开发者基本都是用的淘宝镜像源,推荐大家使用,不然下载插件实在是太慢了

  • 很多大厂都有自己的npm服务器,基于数据安全方面的考虑!(2018年7月12日,黑客入侵了ESLint,传播恶意代码)

npm升级

npm install npm -g   如果是mac  需要加上sudo
1

cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org  
1

npm 和 cnpm 混用问题

TIP

npm和cnpm混用之后,再用npm升级模块导致报错

解决办法:

删除node_modules文件下的文件后,重新执行npm install

yarn

快速、可靠、安全的依赖管理工具,它的目的是解决这些团队使用 npm 面临的一部分问题

npm安装(不推荐)

npm install -g yarn  (不推荐)
1

TIP

我们可以通过npm安装yarn,但是不推荐,因为安全问题

官网下载安装(推荐)

Vue相关

Vuejs:渐进式 JavaScript 框架

安装Vue

npm install vue
1

Vue-cli

Vue.js 官方命令行工具(脚手架),可用于快速搭建大型单页应用

github

# 全局安装 vue-cli
npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
vue init webpack my-project
# 进入项目目录
cd my-project
# 安装依赖
npm install
# 运行项目
npm run dev
1
2
3
4
5
6
7
8
9
10

Vue Devtool

TIP

Vue开发环境初期推荐脚手架,后期建议自己配置项目,包含自己配置webpack

React相关

用于构建用户界面的 JavaScript 库

安装React

npm i react
1

create-react-app

React脚手架工具,快速构建 React 开发环境

# 全局安装create-react-app
npm install -g create-react-app
# 创建一个项目
create-react-app my-app
# 切换目录
cd my-app/
# 开启项目
npm start
1
2
3
4
5
6
7
8

TIP

如果create-react-app my-app报错,可能是nodejs版本的问题,小峰哥试过,nodejs8.9报错了,升级nodejs到10.11.0就可以正常运行了

react-devtools

  • React 调试插件

  • 允许在Chrome和Firefox开发人员工具中检查React组件层次结构的扩展。

  • github

  • 安装使用教程

Angular相关

一套框架,多种平台:移动端 & 桌面端

Angular安装

npm i angular
1

Angular CLI

Angular 脚手架工具,快速构建 Angular 开发环境

# 全局安装angular/cli
npm install -g @angular/cli
# 创建项目
ng new my-dream-app
# 进入项目
cd my-dream-app
# 启动项目
ng serve
1
2
3
4
5
6
7
8

webpack

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。

安装

// 全局安装
npm install --global webpack

// 本地安装
// 要安装最新版本
npm install --save-dev webpack
// 安装特定版本
npm install --save-dev webpack@<version>

// 如果你使用 webpack 4+ 版本,你还需要安装 CLI
npm install --save-dev webpack-cli

// 安装体验版本
npm install webpack@beta
npm install webpack/webpack#<tagname/branchname>

// 安装这些最新体验版本时要小心!它们可能仍然包含 bug,因此不应该用于生产环境

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

TIP

安装webpack4版本后,必须安装webpack-cli

不推荐全局安装 webpack( npm install --global webpack)

这会将你项目中的 webpack 锁定到指定版本,并且在使用不同的 webpack 版本的项目中,可能会导致构建失败。

package.json

{
  "scripts": {
    "start": "npm run dev",
    "dev": "webpack-dev-server --hot",
    "build": "webpack --display-error-details --config webpack.prod.js"
  }
}
1
2
3
4
5
6
7

TIP

开发配置文件默认名称,可以不用--config webpack4之后需要 --mode 使用的时候注意

webpack 开发配置

// webpack.config.js
const path = require('path')
const webpack = require('webpack')
const htmlWebpackPlugin = require('html-webpack-plugin')

// 导入配置文件
const { productConfig, productName } = require('./config')

module.exports = {
  // 入口
  // entry: path.join(__dirname, './src/main.js'),
  entry: path.join(__dirname, productConfig[productName].entry),
  // entry:['babel-polyfill',path.join(__dirname, productConfig[productName].entry)],

  // 出口
  output: {
    // 输出文件目录
    path: path.join(__dirname, productConfig[productName].output),
    // 输出文件名称
    filename: 'bundle.js'
  },

  // 有利于开发期间定位错误信息
  devtool: 'eval-source-map',

  // webpack-dev-server
  devServer: {
    // 自动打开浏览器
    open: true,
    // 端口号
    port: 3000,
  },

  // 用来处理非JS的静态资源
  module: {
    rules: [
      // 添加浏览器私有前缀postcss-loader
      // 需要postcss.config.js配置文件,也需要postcss-loader和autoprefixer
      { test: /\.css$/, use: ["style-loader", "css-loader", "postcss-loader"] ,exclude: /node_modules|lib/ },
      { test: /\.(sass|scss)$/, use: ['style-loader', 'css-loader', 'sass-loader'] },
      { test: /\.less$/,use:["style-loader!css-loader!less-loader"] },
      { 
        test: /\.(png|jpg|jpeg|gif|svg)$/,
        use: {
          loader: 'url-loader',
          options: {
            // limit 就是阀值,值的单位:字节(byte)
            limit: 8192
          }
        } 
      },
      {
        test: /\.(eot|svg|ttf|woff|woff2|otf)$/,
        use: {
          loader: 'url-loader',
          options: {
            // limit 就是阀值,值的单位:字节(byte)
            limit: 8192
          }
        }
      },

      // 处理ES6或者更高级的JS语法:
      { test: /\.js$/, use: 'babel-loader', exclude: /node_modules|lib/ },

      // 处理 Vue单文件组件
      { test: /\.vue$/, use: 'vue-loader' },

      // 让 html-loader 来处理HTML页面,此时,页面就会被webpack处理了
      { test: /\.html$/, use: 'html-loader' }
    ]
  },

  plugins: [
    new htmlWebpackPlugin({
      template: path.join(__dirname, productConfig[productName].html)
    })
  ]
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80

webpack 打包配置

// webpack.prod.js
const path = require('path')
const webpack = require('webpack')
const htmlWebpackPlugin = require('html-webpack-plugin')

// 自动删除目录的包
const cleanWebpackPlugin = require('clean-webpack-plugin')
// 分离 css 到独立的文件中
const ExtractTextPlugin = require("extract-text-webpack-plugin")
// 压缩 css 资源文件
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')
// 导入配置文件
const {productConfig,productName} = require('./config')

module.exports = {
  // 入口
  entry: {
    // 我们写的js代码的入口
    // app: path.join(__dirname, './src/main.js'),
    app: path.join(__dirname, productConfig[productName].entry),
    // 第三方js文件的入口
    vendor: ['vue', 'vuex', 'vue-router', 'axios']
  },

  // 出口
  output: {
    // 输出文件目录
    // path: path.join(__dirname, './dist'),
    path: path.join(__dirname,productConfig[productName].output ),
    // 修改出口js文件名称格式
    // js 表示将生成的js文件放到js目录中
    // [name] 表示入口entry中配置的文件名称
    filename: 'js/[name].[chunkhash].js',
    // 设置公共路径,用来解决CSS中引用字体路径的bug
    publicPath: '/',
    // 指定 代码分离 后的每个js文件的名称和文件路径
    chunkFilename: 'js/[name].[chunkhash].js',
  },

  // postcss-loader 处理CSS浏览器私有前缀
  // 用来处理非JS的静态资源
  module: {
    rules: [
      { 
        test: /\.css$/, 
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use:["css-loader","postcss-loader"],
        })
      },
      { 
        test: /\.(sass|scss)$/, 
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: ['css-loader', 'sass-loader']
        })
      },
      {
        test: /\.(png|jpg|jpeg|gif)$/,
        use: {
          loader: 'url-loader',
          options: {
            // limit 就是阀值,值的单位:字节(byte)
            limit: 7168,

            // images 表示将图片打包的images文件夹中
            // [hash:10] 表示采用hash命名方式,并且名称长度为:10个字母
            // [ext] 表示保留图片原始的后缀名称
            name: 'images/[hash:10].[ext]'
          }
        }
      },

      {
        test: /\.(eot|svg|ttf|woff|woff2|otf)$/,
        use: {
          loader: 'url-loader',
          options: {
            // limit 就是阀值,值的单位:字节(byte)
            limit: 8192,
            name: 'fonts/[hash:7].[ext]'
          }
        }
      },

      // 处理ES6或者更高级的JS语法:
      { test: /\.js$/, use: 'babel-loader', exclude: /node_modules|lib/ },

      // 处理 Vue单文件组件
      { test: /\.vue$/, use: 'vue-loader' },

      // 让 html-loader 来处理HTML页面,此时,页面就会被webpack处理了
      { test: /\.html$/, use: 'html-loader' }
    ]
  },

  plugins: [
    new htmlWebpackPlugin({
      template: path.join(__dirname, productConfig[productName].html),

      // 压缩HTML
      minify: {
        // 移除空白
        collapseWhitespace: true,
        // 移除注释
        removeComments: true,
        // 移除属性中的双引号
        removeAttributeQuotes: true
      }
    }),

    new cleanWebpackPlugin([productConfig[productName].output]),

    // 抽离第三方包
    new webpack.optimize.CommonsChunkPlugin({
      // 将 entry 中指定的 ['vue', 'vue-router', 'axios'] 打包到名为 vendor 的js文件中
      // 第三方包入口名称,对应 entry 中的 vendor 属性
      name: 'vendor',
    }),

    // 压缩JS代码
    new webpack.optimize.UglifyJsPlugin({
      // 压缩
      compress: {
        // 移除警告
        warnings: false
      }
    }),

    // 指定环境为生产环境:vue会根据这一项启用压缩后的vue文件
    new webpack.DefinePlugin({
      'process.env': {
        'NODE_ENV': JSON.stringify('production')
      }
    }),

    // 通过插件抽离 css (参数)
    new ExtractTextPlugin('css/style.css'),
    // 抽离css 的辅助压缩插件
    new OptimizeCssAssetsPlugin(),
  ]
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143

config 配置文件

// 导出配置文件
module.exports = {
    productName:'demo',//指定当前的项目名称
    // 当前的项目配置:
    // entry: 入口
    // output:出口
    // html: html文件位置
    productConfig:{
        demo:{
            entry:'./src/demo/main.js',
            output:'./dist/demo',
            html:'./src/demo/index.html',
        },
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
  • 通过配置config.js文件,可以运行开发多个项目,互不干扰

Gulp

用自动化构建工具增强你的工作流程!

入门教程

# 全局安装 gulp
npm install --global gulp

# 作为项目的开发依赖(devDependencies)安装
npm install --save-dev gulp

# 在项目根目录下创建一个名为 gulpfile.js 的文件
var gulp = require('gulp');

gulp.task('default', function() {
  // 将你的默认的任务代码放在这
});

# 运行 gulp
gulp
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

TIP

默认的名为 default 的任务(task)将会被运行

想要单独执行特定的任务(task),请输入 gulp <task> <othertask>

Git

Git是目前世界上最先进的分布式版本控制系统(没有之一)

配置用户名和邮箱

初次安装git需要配置用户名和邮箱,否则git会提示:please tell me who you are

git config --global user.name "你的用户名"

git config --global user.email "你的密码"
1
2
3

TIP

用户名和邮箱是git提交代码时用来显示你身份和联系方式的,并不是github用户名和邮箱

生成密钥对(Mac)

大多数 Git 服务器都会选择使用 SSH 公钥来进行授权。系统中的每个用户都必须提供一个公钥用于授权,没有的话就要生成一个。

生成公钥的过程在所有操作系统上都差不多。

首先你要确认一下本机是否已经有一个公钥。

SSH 公钥默认储存在账户的主目录下的 ~/.ssh 目录

 // 进入目录
 cd ~/.ssh
 // 查看当前目录下面的文件
 ls
1
2
3
4
  • 有 .pub 后缀的文件就是公钥,另一个文件则是密钥
  • 如果么有文件就自己生成
ssh-keygen -t rsa -C "your_email@youremail.com"
1
  • -t:是选择kye的type。分别有 RSA 和 DSA 两种
  • -c:指定所指定的注释,可以方便用户标识这个密钥,指出密钥的用途或其他有用的信息,用自己的邮箱即可
  • 连续三次回车:一个密语字符串(passphrase)和2次口令(password),空都代表没有
  • 最后把公司文件发给相关人员即可

Charles

强大的抓包工具 支持HTTP和HTTPS

介绍

是一个HTTP代理服务器,HTTP监视器,反转代理服务器,当浏览器连接Charles的代理访问互联网时,Charles可以监控浏览器发送和接收的所有数据。它允许一个开发者查看所有连接互联网的HTTP通信,这些包括request, response和HTTP headers (包含cookies与caching信息)。

简单来说就类似与我们浏览器调试模式的network的抓包工具,但是如果不是浏览器环境下,我们就需要用这一款软件了

优点

  • 支持SSL代理。可以截取分析SSL的请求
  • 支持流量控制。可以模拟慢速网络以及等待时间(latency)较长的请求。
  • 支持AJAX调试。可以自动将json或xml数据格式化,方便查看
  • 支持AMF调试。可以将Flash Remoting 或 Flex Remoting信息格式化,方便查看。
  • 支持重发网络请求,方便后端调试。
  • 支持修改网络请求参数
  • 支持网络请求的截获并动态修改
  • 检查HTML,CSS和RSS内容是否符合W3C标准。

TIP

该软件在特殊情况下会出现劫持浏览器导致无法浏览网页的问题(请谨慎使用)

关闭软件即可,或者是取消代理

SVN

Apache Subversion 通常被缩写成 SVN,是一个开放源代码的版本控制系统

http-server

  • http-server 是一个简单的零配置命令行HTTP服务器, 基于 nodeJs

  • 只需要进入指定的目录,运行http-server命令,即可以当前目录为网站根目录开启一个服务器,非常方便快捷

  • 安装 (全局安装加 -g) :

 npm install http-server 
1
  • 运行网站

在站点目录下开启命令行输入

 http-server
 可以通过 -p 指定端口
1
2
  • 访问:

  • http://localhost:8080

  • http://127.0.0.1:8080

参数配置:

-p 端口号 (默认 8080)

-a IP 地址 (默认 0.0.0.0)

-d 显示目录列表 (默认 'True')

-i 显示 autoIndex (默认 'True')

-e or --ext 如果没有提供默认的文件扩展名(默认 'html')

-s or --silent 禁止日志信息输出

--cors 启用 CORS via the Access-Control-Allow-Origin header

-o 在开始服务后打开浏览器
-c 为 cache-control max-age header 设置Cache time() , e.g. -c10 for 10 seconds (defaults to '3600'). 禁用 caching, 则使用 -c-1.
-U 或 --utc 使用UTC time 格式化log消息

-P or --proxy Proxies all requests which can't be resolved locally to the given url. e.g.: -P http://someurl.com

-S or --ssl 启用 https

-C or --cert ssl cert 文件路径 (default: cert.pem)

-K or --key Path to ssl key file (default: key.pem).

-r or --robots Provide a /robots.txt (whose content defaults to 'User-agent: *\nDisallow: /')

-h or --help 打印以上列表并退出
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

pm2

PM2是node进程管理工具,可以利用它来简化很多node应用管理的繁琐任务,如性能监控、自动重启、负载均衡等,而且使用非常简单

详细教程链接请看小峰哥Linux部分教程,非常详细

详情点击

# npm安装
npm install pm2 -g
# mac 系统:添加sudo

# yarn安装
yarn global add pm2
1
2
3
4
5
6

postman

  • postman有Chrome插件版本和客户端版本(包含macos版本)
  • Postman一款非常流行的API调试工具
  • 官方网站:https://www.getpostman.com/

接口调试工具,非常推荐