前端项目开发环境的搭建

1、git的安装和项目的建立

首先，去 git 官网下载对应的安装包，加压安装。

安装成功

接下来，开始配置.gitconfig 文件；输入vim ~/.gitconfig 同时按下i进入编辑模式：

.gitconfig配置

emial 字段是必填的，也可以根据需要配置一些简写：

配置简写

完成后，先按Esc, 再输入:wq 保存退出。

要把代码进行托管，先要建立一个仓库，可以选择
gitee 或者 github 。

gitee新建项目界面

为了本地的设备可以和仓库进行关联，需要部署个人公钥。
首先，输入cd ~/.ssh 看看自己电脑上是否已经生成过公钥。

查看公钥

如果有id_rsa.pub 文件，说明公钥存在，接下来只需拷贝到项目里。

拷贝公钥

添加公钥到项目

完成以上步骤后，就可以把代码克隆到本地了

克隆

最后，我们可以配置下.gitignore 把一些不想传到线上的文件忽略掉。

.gitignore

2. nodejs 和 yarn 的安装

nodejs更新较快，一般下载偶数版。
yarn 是 npm 的替代品，内部做了很多优化。

yarn 与 npm 对比

项目初始化，输入 yarn init 生成 package.json 文件。

3. webpack 的配置

webpack 是一个前端资源加载/打包的工具。
安装 webpack : yarn add webpack@xxx --dev 只是要开发环境需要，上线后不需要。

在项目下建立一个webpack.config.js 文件，配置简单的入口和出口，直接从官网上复制，简单修改

const path = require('path');
module.exports = {
    entry:  './src/app.jsx',
    output: {
        path: path.resolve(__dirname, 'dist'),
        publicPath: WEBPACK_ENV === 'dev'
                     ? '/dist/' : '//s.bbytech.com/admin-v1-fe/dist/',
        filename: 'js/app.js'
    }
}

• 对 html 的处理
  需要用到 html-webpack-plugin 插件。
  
  官网搜索提示

安装插件yarn add html-webpack-plugin --dev

复制官网配置，更改

var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    // ...
    plugins: [
        // 处理HTML文件
        new HtmlWebpackPlugin({
            // filename:'test1.html',
            template:'./src/index.html',
            favicon : './favicon.ico'
        })
    ]
};

上述打包后，会自动把 js 文件引入到html 文件中。
inject 默认值为true
实例化过程，传入了一个配置对象，比如用了本地的html模板，还可以做其他的配置，详细文档

• es6 和 react 的处理

需要使用 babel-loader ，可以将es6 转成es5; react 中 jsx 转成 js。

搜索提示

yarn add babel-loader babel-core babel-preset-env --dev
然后把复制配置到webpack配置对象中

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      }
    }
  ]
}

如果要处理 jsx 语法 ，需要如下配置：

// .babelrc
  {
    "presets": [
      "es2015",
      "react"
    ]
 }
// 其实是babel 的配置文件.babelrc

• 对 css 的处理
  js文件通过 import 导入 一个 css 文件，需要安装style-loader 和 css-loader

+   module: {
+     rules: [
+       {
+         test: /\.css$/,
+         use: [
+           'style-loader',
+           'css-loader'
+         ]
+       }
+     ]
+   }
  };

这样直接处理，会把css打包到js文件中的最后；只有js文件加载完成后，页面才会显示样式；在这之前页面会白屏，所以需要将css 单独打包成文件。

安装 extract-text-webpack-plugin 插件

• 对sass 的处理
  安装sass-loader ，有一个坑，需要依赖 node-sass 。

• 对图片和字体图标的处理
  安装file-loader 或url-loader

• 提取公共模块
  webpack 封装了一个方法。