如何从零开始建前端一个脚手架

1.事先我们要创建一个文件夹，叫stage
2.在文件夹里创建一个read.me文件在文件里写上对文件的描述

一个react的脚手架
# main functionalities
- npm scripts [dev product deploy]
- babel[ES6 ES5]
- webpack [图片、CSS、js等处理]
- jest[单元测试]
# file structure
|- src
|- |- app
|- |- components
|- |- global
|- |- |- reset.css

3.好了 ， 然后接下来我们git init一下将其用git来管理，顺便按照上面的描述创建文件夹如图

QQ截图20171121224751.jpg

4.然后接下来我们先要下载babel转译工具，先touch .babelrc创建一个.babelrc文件，接着npm init创建一个package.json，将scripts里面的内容改一下，改成

"scripts": {
    "dev": "echo \"hello dev\"",
    "prod": "echo \"hello prod\""
  }

然后在git bash里输入npm run dev 看看会出现什么，如果出现hello dev说明没问题。

5.然后我们要来下载babel依赖了，我们一个个来装，首先我们要装es6转译的，还有jsx语法转译的。第一步先在之前创建的.babelrc文件里输入

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

然后在git bash里输入

$ npm install babel-preset-stage-0 babel-preset-es2015 babel-preset-react --verbose --save-dev

下载完依赖以后，我们就可以尝试转译es67语法了，在scripts里面增加
"babel": "babel src/app -d dist"
然后npm运行npm run babel将app里面的js文件转化为es5语法，当然必须先在app里创建一个.js文件并输入依稀es67语法才能转译成功。

6.我们还需要用webpack来处理我们的js.css.图片等资源，所以我们创建一个webpack文件夹，为什么需要一个文件夹而不是一个webpack文件呢，因为我们需要适配多种环境，生产环境，线上环境等，所以需要多个webpack文件。接着在webpack文件夹里创建三个文件，分别是

base.config.js 
dev.config.js
prod.config.js

然后安装webpack，
$ npm i webpack --save-dev

7.进到base.config.js里面，开始写一个基本的配置文件

const path = require('path')  //path是node.js自带的路径工具
module.exports = {
      entry: {
          sale: "./sale.js"
    },
      output: {
          path: path.resolve(process.cwd(), "dist"),  //path.resolve(process.cwd()，) 指当前node启动目录
          filename: "[name].js"     //输出文件name
    },
module: {
        rules: [
            {
                test: /\.jsx?$/,        //相应的文件
                loader: 'babel-loader'     //处理的插件
            },
            {
                test: /\.css$/,
                loader: 'css-loader'
            },
            {
                test: /\.scss$/,
                loader: 'sass-loader'
            },
            {
                test: /\.less/,
                loader: 'less-loader'
            },
            {
                test: /\.(.png|jpg|jpeg|gif|woff|woff2|ttf|eot|svg|swf)$/,
                loader: "file-loader"
            }
        ]
    },
}

然后安装相应的依赖

$ npm i babel-loader css-loader less-loader sass-loader file-loader --save-dev --verbose

安装好之后呢，我们先测试一下代码到底能不能work，将package.json里的scripts里的dev改成
"dev": "webpack --config webpack/base.config.js"
然后
npm run dev
跑完之后你会发现它会报错，报错内容是cant resolve sale.js，找不到sale.js文件，因为webpack entry入口的启动上下文就是node.js的启动上下文，所以要加上相应路径，将entry改为

entry: {
        sale: "./src/app/sale.js"
}

然后重新npm run dev你会发现dist里多了一个sale.js的文件，转译成功。
不过如果每个文件都加个前缀会很麻烦，所以我们手动配置一下webpack的编译上下文，在 base.config.js里加上
context: path.resolve(process.cwd(), "src/app")
然后把我们的entry改成

entry: {
        sale: "./sale.js"
}

也可以跑成功了。
不过我们的入口文件可能会比较多，所以我们把入口文件也分离出来单独放在一个文件里，在webpack文件夹里重新创建一个entry.js。

entry.js

module.exports = {
    sale: "./sale.js"
}

base.config.js

const entry = require('./entry');

module.exports = { 
    entry: entry,
}

我们可以在app文件夹里再创建一个list.js,里面我们可以随便写

list.js

const b = "aaaa"
console.log(b)

然后改一下entry.js

entry.js

module.exports = {
    sale: "./sale.js",
    list: "./list.js"
}

这样我们不用动base.config.js就可以增加文件了

8.不过前端不仅有js还有css等。那么这个css文件怎么进入我们的项目呢。我们先在app文件夹下新建一个sale.css文件，随便输入点内容

sale.css

.a {
    color: yellow;
}

同时手动引入一下css文件
sale.js

import "./sale.css"
let a = 1;
console.log(a)

然后我们跑一下npm run dev 发现能成功跑起来，css文件就成功引入了，
不过我们发现每次改代码都要重新跑一遍dev，这个太麻烦，我们再用webpack的watch功能

在base.config.js文件里加上

watch: true,

然后重新跑一遍，然后我们会发现，我们改代码他就会自己重新刷新而不用重新跑npm了。（不过配置文件更改还是要重新跑的）

然后我们查看一下dist里面的文件，发现里面只有list.js和sale.js两个文件，然后看sale.js里面的代码，

NUYJKTEWM6EM_7}JD({$)`M.png

发现.a {color: yellow}竟然在js文件里面，可是我们要的是css文件独立出来啊，那么我们需要怎么做呢。

9.我们再base.config.js里面只告诉了用什么插件处理css，没有告诉它把文件拿出来。这个时候我们要安装一个插件

$ npm install --save-dev extract-text-webpack-plugin

安装完之后呢，我们可以看看这个插件是怎么用的，可以看下面这个网站
https://github.com/webpack-contrib/extract-text-webpack-plugin

看上面的usage，然后经过更改，我们的base.config.js变成了这样

const path = require('path');
const entry = require('./entry');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = { 
    context: path.resolve(process.cwd(), "src/app"),
    entry: entry,
    watch: true,
    output: {
        path: path.resolve(process.cwd(), "dist"),
        filename: "[name].js"
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                loader: 'babel-loader'
            },
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: "css-loader"
                })
            },
            {
                test: /\.scss$/,
                use: ExtractTextPlugin.extract({
                     fallback: 'style-loader',
                     //resolve-url-loader may be chained before sass-loader if necessary
                    use: ['css-loader', 'sass-loader']
                })
            },
            {
                test: /\.less/,
                use: ExtractTextPlugin.extract({
                     fallback: 'style-loader',
                     //resolve-url-loader may be chained before sass-loader if necessary
                    use: ['css-loader', 'less-loader']
                })
            },
            {
                test: /\.(.png|jpg|jpeg|gif|woff|woff2|ttf|eot|svg|swf)$/,
                loader: "file-loader?name=[name]_[sha512:hash:base64:7].[ext]"
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin("style.css"),
    ]
}

写好配置后我们再安装一下，style.loader

$ npm install style-loader --save-dev

然后跑一下项目，然后一个基本配置项目成功了。我们可以写个less或sass文件简单测试一下。

10.接下来，我们要处理我们的图片文件。首先在src文件夹下创建一个img文件夹，存放图片。可以从网上随便下一张图片放进去。有了图片我们就可以测试一下我们的项目能不能处理图片。打开刚刚简单写的less文件

sale.less

.a {
    color: yellow;
    .b {
        color: red;
    }
    .c {
        background: url('../img/2cun.jpg');
    }
}

然后你会发现dist里面会有一张和你之前放进img文件夹里一样的图片。

11.不过随着文件的增加，我们不能把所有的css、图片都放在同一个文件夹里，我们必须把他们单独分开。把css和图片单独放在文件夹里。改一下file-loader和plugins的配置

base.config.js

 test: /\.(.png|jpg|jpeg|gif|woff|woff2|ttf|eot|svg|swf)$/,
 loader: "file-loader",
 options: {
        name: 'assets/[name]_[sha512:hash:base64:7].[ext]'
    }

plugins: [
        new ExtractTextPlugin("css/[name].css"),
    ]

12.我们发现配置里面并没有html，接下来我们要引入html文件，在那之前，我们先下载一个工具——webpack-dev-server
首先我们先下载下来

$ npm i webpack-dev-server --save-dev

然后改一下package.json的dev命令

"scripts": {
    "dev": "webpack-dev-server --config webpack/base.config.js",
    "prod": "echo \"hello prod\"",
    "babel": "babel src/app -d dist"
  },

然后我们跑npm run dev就会产生一个8080端口。这个时候我们再建一个html文件就完事了。不过如果想改变它的输出端口号，我们可以对base.config.js文件进行编辑

devServer: {
        contentBase: path.resolve(process.cwd(),   "指定的文件地址"),
        compress: true,
        port: 9000
    }

为了建立html，我们要再引入一个插件webpack-html-plugin

$ npm install html-webpack-plugin --save-dev

引入后参照文档
https://github.com/jantimon/html-webpack-plugin
将文档里的内容拷贝进来

var HtmlWebpackPlugin = require('html-webpack-plugin');
var webpackConfig = {
  entry: 'index.js',
  output: {
    path: __dirname + '/dist',
    filename: 'index_bundle.js'
  },
  plugins: [new HtmlWebpackPlugin()]
};

就是在我们的base.config.js里面加入这一行代码

const HtmlWebpackPlugin = require('html-webpack-plugin');

然后改一下plugins

plugins: [
        new ExtractTextPlugin("css/[name].css"),
        new HtmlWebpackPlugin()
    ]

然后再跑dev，发现我们打开了一个空的html，里面引入了sale.js和sale.css。不过我们在真的项目里面并不能这么做。

13.我们在src文件里新建一个base文件夹，创建一个webpack.template.html模板代码,编辑它

webpack.template.html

然后配置这么改

plugins: [
        new ExtractTextPlugin("css/[name].css"),
        new HtmlWebpackPlugin({
            title: 'sale',
            template: path.resolve(
                process.cwd(),
                'src/base/webpack.template.html'),
            filename: 'sale.html',
            chunks: ['sale']  //sale.html引入的css和js文件资源
    })
    ]

测试一下，npm run dev就会打开端口相应的资源。

14.测试完成接下来我们继续，在stage文件夹里新建一个sample文件夹，里面新建sale.html。同时编辑一下

sale.html