开发文档

[TOC]

简介

本项目使用 webpack 创建，前端页面开发采用 reactjs 。
前端样式使用 less 。

启动项目

运行本项目之前，请先安装 nodeJS webpack 。
克隆本项目 git clone https://github.com/YuQian2015/koa-learning.git 。
cd koa-learning 进入项目路径。
执行 npm install 安装依赖的 npm 包。
在项目跟目录执行npm run views 即可启动项目。
执行 npm run build 编译打包项目。

`pages` 目录

/pages 目录下存放各主要页面，包括但不限于各Tab页面，登录页面，注册页面。

`Less` 样式表

本项目样式表统一放在 /style 目录，该目录下的 main.less 将作为所有样式的入口，在 main.js 中被引入，将该 /style目录分成以下几个结构：

/components 存放页面组件的样式
/container 页面容器的样式表
/pages 各页面的样式表，文件名与页面的文件对应
/util 工具类样式表

关于颜色和变量定义:

关于本地储存，使用 `LocalDB`

LocalDB 是对 JS 的 localStorage API 的封装，地址https://github.com/kucukkanat/LocalDB。

安装：

yarn add local-db --dev

或者：

npm install local-db --save-dev

或者：

<!-- local-db will assign itself to window.LocalDB -->
<script src='https://unpkg.com/local-db'></script>

使用：

import LocalDB from 'local-db'

或者

var LocalDB = require('local-db')

然后

var usersTable = new LocalDB('users')

`webpack` 分离和压缩样式

extract-text-webpack-plugin 使用方法

根据不同版本的 webpack 使用不同版本的插件，版本对应和配置详情https://www.npmjs.com/package/extract-text-webpack-plugin

安装：

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

配置：

const ExtractTextPlugin = require('extract-text-webpack-plugin');

如果是使用 css ，plugins 里面添加：

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: "css-loader"
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin("styles.css"),
  ]
}

如果是使用LESS 或者 Sass

const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          //resolve-url-loader may be chained before sass-loader if necessary
          use: ['css-loader', 'sass-loader']
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin('style.css')
    //if you want to pass in options, you can do so:
    //new ExtractTextPlugin({
    //  filename: 'style.css'
    //})
  ]
}

使用 optimize-css-assets-webpack-plugin 压缩 css 文件

插件地址：https://www.npmjs.com/package/optimize-css-assets-webpack-plugin

安装：
```
npm install --save-dev optimize-css-assets-webpack-plugin
```
配置：
```
var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
module.exports = {
    module: {
        loaders: [
            { test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader") }
        ]
    },
    plugins: [
        new ExtractTextPlugin("styles.css"),
    new OptimizeCssAssetsPlugin({
      assetNameRegExp: /\.css$/g,
      cssProcessor: require('cssnano'),
      cssProcessorOptions: { discardComments: {removeAll: true } },
      canPrint: true
    })
    ]
}
```
使用extract-text-webpack-plugin 生成单独的 css 时，可能会报错 chunk.sortModules is not a function ，解决方案是回退 extract-text-webpack-plugin 版本号到 2.1.2 ，npm i extract-text-webpack-plugin@2.1.2 。

一般的压缩 js 插件无法压缩 es6 ，如果想对 es6 代码进行压缩，可以使用UglifyjsWebpackPlugin 。但是如果教程一步一步来还是会报错 Unexpected token: name (doc)。解决方案是将 babel 配置拿出来，不要放在 webpack.config 中，单独的放到 .babelrc 中。

使用了extract-text-webpack-plugin 后可以使用 optimize-css-assets-webpack-plugin 这一插件来解决。

`webpack` 图片的路径与打包

在实际生产中有以下几种图片的引用方式

html 文件中 img 标签的 src 属性引用或者内嵌样式引用

<img src="photo.jpg" />
<div style="background:url(photo.jpg)"></div>

css 文件中的背景图等设置

.photo {
  background: url(photo.jpg);
}

JavaScript 文件中动态添加或者改变的图片引用

var imgTempl = '<img src="photo.jpg" />';
document.body.innerHTML = imgTempl;

ReactJS 中图片的引用

import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
    render() {
        return (<img src='photo.jpg' />);
    }
}

ReactDom.render(<App />, document.querySelector('#container'));

url-loader

在 webpack 中引入图片需要依赖 url-loader 这个加载器。

安装：
```
npm install url-loader --save-dev
```
在 webpack.config.js 文件中配置如下：
```
module: {
　　loaders: [
　　　　{
　　　　　　test: /.(png|jpg)$/,
　　　　　　loader: 'url-loader?limit=8192'
　　　　}
　　]
}
```
test 属性代表可以匹配的图片类型，除了 png、jpg 之外也可以添加 gif 等，以竖线隔开即开。

loader 后面 limit 字段代表图片打包限制，这个限制并不是说超过了就不能打包，而是指当图片大小小于限制时会自动转成 base64 码引用。上例中大于 8192 字节的图片正常打包，小于 8192 字节的图片以 base64 的方式引用。

url-loader 后面除了 limit 字段，还可以通过 name 字段来指定图片打包的目录与文件名：
```
module: {
　　loaders: [
　　　　{
　　　　　　test: /\.(png|jpg)$/,
　　　　　　loader: 'url-loader?limit=8192&name=images/[hash:8].[name].[ext]'
　　　　}
　　]
}
```
上例中的 name 字段指定了在打包根目录（output.path）下生成名为 images 的文件夹，并在原图片名前加上8位 hash 值。

如：

在 main.css 中引用了同级 images 文件夹下的 bg.jpg 图片
```
background-image: url(/images/bg.jpg);
```
通过之前的配置，使用 webpack 命令对代码进行打包后生成如下:

打包目录中，css 文件和 images 文件夹保持了同样的层级，可以不做任务修改即能访问到图片。区别是打包后的图片加了 hash 值，bundle.css 文件里引入的也是有hash值的图片。
```
background-image: url(images/f593fbb9.bg.jpg);
```

publicPath output.publicPath 表示资源的发布地址，当配置过该属性后，打包文件中所有通过相对路径引用的资源都会被配置的路径所替换。

output: {
　　path: 'dist',
　　publicPath: '/assets/',
　　filename: 'bundle.js'
}

main.css

background-image: url(/images/bg.jpg);

bundle.css

background-image: url(/assets/images/f593fbb9.bg.jpg);

JS 中的图片

在 js 或者 react 中引用的图片都没有打包进 bundle 文件夹中，正确写法应该是通过模块化的方式引用图片路径，这样引用的图片就可以成功打包进 bundle 文件夹里了。

js
```
var imgUrl = require('./images/bg.jpg'),
    imgTempl = '<img src="'+imgUrl+'" />';
document.body.innerHTML = imgTempl;
```
react
```
render() {
    return (<img src={require('./images/bg.jpg')} />);
}
```
HTML中的图片

由于 webpack 对 html 的处理不太好，打包 HTML 文件中的图片资源是相对来说最麻烦的。这里需要引用一个插件—— html-withimg-loder
```
npm install html-withimg-loader --save-dev
```
webpack.config.js 添加配置
```
module: {
　　loaders: [
　　　　{
　　　　　　test: /\.html$/,
　　　　　　loader: 'html-withimg-loader'
　　　　}
　　]
}
```
在 bundle.js 中引用 html 文件
```
import '../index.html';
```
这样 html 文件中的图片就可以被打包进 bundle 文件夹里了。

压缩 `JS` 代码

使用 uglifyjs-webpack-plugin 对代码进行压缩，插件地址https://www.npmjs.com/package/uglifyjs-webpack-plugin。

安装：

npm install uglifyjs-webpack-plugin --save-dev

使用：

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

module.exports = {
  plugins: [
    new UglifyJsPlugin()
  ]
}

命名规则

pages 目录下页面名字为驼峰命名，如登录页面login，则文件名为 LoginPage.jsx；
为了便于查找，样式文件名与之对应，如 LoginPage.jsx 的样式文件为 LoginPage.less ;
每个 .jsx 返回的根节点以文件名作为 className 属性；

React 踩坑汇总

如何在 React Router v4 中使用 History push

https://stackoverflow.com/questions/42701129/how-to-push-to-history-in-react-router-v4
https://github.com/ReactTraining/react-router/issues/4059

`webpack` 踩坑汇总

使用extract-text-webpack-plugin 生成单独的 css 时，可能会报错 chunk.sortModules is not a function 。

原因：使用的插件版本和 webpack版本不匹配。

解决方案：回退 extract-text-webpack-plugin 版本号到 2.1.2 （对应本项目），npm i extract-text-webpack-plugin@2.1.2 。
一般的压缩 js 插件无法压缩 es6 ，如果想对 es6 代码进行压缩，可以使用 UglifyjsWebpackPlugin 。如果教程一步一步来还是会报错 Unexpected token: name (doc)。解决方案是将 babel 配置拿出来，不要放在 webpack.config 中，单独的放到 .babelrc 中。
使用了extract-text-webpack-plugin 后可以使用 optimize-css-assets-webpack-plugin 这一插件来解决。

如果使用展开运算符如 {...props} 提示 Syntax error: Unexpected token 。

原因：扩展语法不是 es2015 或者 react babel 预置的. 它是 stage 3 的提案. 为了在你的React项目中启用，需要安装 babel stage 3 插件:

npm install --save-dev babel-preset-stage-3

在你的 .babelrc 中添加 :

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

本项目配置 :

{
        test: /\.jsx?$/, // 匹配'js' or 'jsx' 后缀的文件类型
        exclude: /(node_modules|bower_components)/, // 排除某些文件
        loader: 'babel-loader', // 使用'babel-loader'
        query: { // 参数
          "presets": ["es2015", "react", "stage-3"]
        }
}

本文档不断更新中

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

前端项目开发介绍.md

前端项目开发介绍.md

开发文档

简介

启动项目

`pages` 目录

`Less` 样式表

关于本地储存，使用 `LocalDB`

`webpack` 分离和压缩样式

`webpack` 图片的路径与打包

压缩 `JS` 代码

命名规则

React 踩坑汇总

`webpack` 踩坑汇总

Files

前端项目开发介绍.md

Latest commit

History

前端项目开发介绍.md

File metadata and controls

开发文档

简介

启动项目

pages 目录

Less 样式表

关于本地储存，使用 LocalDB

webpack 分离和压缩样式

webpack 图片的路径与打包

压缩 JS 代码

命名规则

React 踩坑汇总

webpack 踩坑汇总

`pages` 目录

`Less` 样式表

关于本地储存，使用 `LocalDB`

`webpack` 分离和压缩样式

`webpack` 图片的路径与打包

压缩 `JS` 代码

`webpack` 踩坑汇总