webpack+es2015+react+Ant Design纲

作者: ITman彪叔 | 来源:发表于2017-11-21 16:19 被阅读83次

最近TWaver 3D机房项目打算使用Ant Design来重构后端管理页面，Ant Design 团队不是很熟悉，webpack react等用的不多，所以自己花了一天时间，把相关知识点撸了一遍，给团队做了个培训。下面主要是一个培训的纲领，整个流程可以通畅的跑下来；主要是webpack+es2015+react+Ant Design。当然，ant design 自己有一套框架打包平台，有兴趣的也可以研究。

官方文档

参考webpack官方文档，点击一下链接
https://doc.webpack-china.org/guides/
https://doc.webpack-china.org/concepts/

安装nodejs

忽略

安装cnpm

npm 很多时候网络不好使，所以使用cnpm更方便，如果cnpm安装不了，可以翻墙安装

npm install -g cnpm

安装webpack

本地安装

cnpm install --save-dev webpack 
cnpm install --save-dev webpack@<version>

全局安装

cnpm install --global webpack

创建webpack项目

mkdir webpack-demo && cd webpack-demo 
cnpm init -y 
cnpm install --save-dev webpack

bundle 文件

一般代码，直接在html文件中引入，js文件，比如下面的index.js

<html>
  <head>
    <title>Getting Started</title>
    <script src="https://unpkg.com/lodash@4.16.6"></script>
  </head>
  <body>
    <script src="./src/index.js"></script>
  </body>
</html>

使用webpack 后，在html引入一个bundle.js文件，然后通过webpack 会把所有的源代码打包到bundle.js文件中。

  <html>
   <head>
     <title>Getting Started</title>
-    <script src="https://unpkg.com/lodash@4.16.6"></script>
   </head>
   <body>
-    <script src="./src/index.js"></script>
+    <script src="bundle.js"></script>
   </body>
  </html>

webpack配置文件

const path = require('path');  
module.exports = {   
  entry: './src/index.js',  
   output: {     filename: 'bundle.js',     path: path.resolve(__dirname, 'dist')   }};

入口Entiry

./src/index.js

输出

  output: {     filename: 'bundle.js',     path: path.resolve(__dirname, 'dist')

使用import

不是用webpack的情况下，代码在script标签里面引入，此时可以直接使用

function component() {
  var element = document.createElement('div');

  // Lodash（目前通过一个 script 脚本引入）对于执行这一行是必需的
  element.innerHTML = _.join(['Hello', 'webpack'], ' ');

  return element;
}

document.body.appendChild(component());

使用webpack之后，可以直接使用使用import语句引入在js文件中引入js文件

+ import _ from 'lodash';
+
  function component() {
    var element = document.createElement('div');

-   // Lodash, currently included via a script, is required for this line to work
+   // Lodash, now imported by this script
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');

    return element;
  }
  document.body.appendChild(component());

当然此时需要使用以下命令安装lodash包：

cnpm install lodash

打包命令

原始命令

./node_modules/.bin/webpack src/index.js dist/bundle.js

NPM 脚本(NPM Scripts)

通过 ‘创建webpack项目’ 的命令，可以创建package.json,如下：

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack" // 配置webpack脚本命令
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
  ...
  },
}

运行命令 npm run build 相当于运行原始命令。

webpack基本概念

入口(entry)

入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。

出口

output 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件。你可以通过在配置中指定一个 output 字段，来配置这些处理过程

Loader

让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效，然后你就可以利用 webpack 的打包能力，对它们进行处理。

插件

loader 被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务。
想要使用一个插件，你只需要require()它，然后把它添加到plugins
数组中。

使用 Loader

CSS Loader

安装 css loader

cnpm install --save-dev style-loader
cnpm install --save-dev css-loader

配置CSS Loader

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

使用css文件

引入css文件

import style from '../css/style.css';

需要使用css样式的地方直接使用

 element.classList.add('hello');

加载图片资源File Loader

安装File Loader

cnpm install --save-dev file-loader

配置File Loader

{
         test: /\.(png|svg|jpg|gif)$/,
         use: [
                'file-loader'
              ]
        },

使用图片资源

引入图片资源

import icon from '../res/icon.png';

在使用的地方，直接使用

var myIcon = new Image();
myIcon.src = Icon;
element.appendChild(myIcon);

在css中直接引入图片资源即可：

 background: url('../res/icon.png');

加载字体文件 File Loader

配置字体加载

{
    test: /\.(woff|woff2|eot|ttf|otf)$/,
    use: [
         'file-loader'
       ]
}

在css中使用字体文件

@font-face {
   font-family: 'MyFont';
   src:  url('../res/my-font.woff2') format('woff2'),
         url('../res/my-font.woff') format('woff');
   font-weight: 600;
   font-style: normal;
 }

ES2015 && React

要使用ES2015语法和jsx语法，需要使用bable来转换。 bable-loader相关知识点参考：

更多loader参考：
https://doc.webpack-china.org/loaders/

安装babel-loader

cnpm install babel-loader babel-core babel-preset-env webpack

配置bable-loader

 {
            test: /\.js$|\.jsx$/,
            exclude: /(node_modules|bower_components)/,
            use: {
                loader: 'babel-loader',
                options: {
                    presets: ['react','es2015']
                }
            }
 },

其中 presets: ['react','es2015'] ，表示支持react和es2015语法。

使用es2015

一个简单的示例 print.js

export default function printMe() {
    console.log('I get called from print.js  !');
}

在index.js中使用方法printMe,首先引入文件：

import print from './print.js';

然后使用printMe方法，此时变成了print:

print();

使用react

要使用react，首选需要安装。

安装react

cnpm install react --save-dev
cnpm install react-dom --save-dev

编写react组件

import React from 'react';
export default class Hello extends React.Component {
    render() {
        return <div><h1>hi alienzhou!</h1><h2>fdsayoyoyofdasfdsa1</h2></div>;
    }
}

使用react组件

首先引入react组件，代码如下：

import Hello from './components/hello.jsx';

然后使用组件，代码如下：

var element = document.createElement('div');
var mountNode = element;
    ReactDOM.render(<Hello/>, element);
    ReactDOM.render(<span><DatePicker/><DatePicker/></span>,element);
    ReactDOM.render(<Hello><Hello> , mountNode);

使用ant design 组件

安装ant design

cnpm install antd --save-dev

使用ant design

引入css文件

import 'antd/dist/antd.css';

引入相关组件

import { DatePicker } from 'antd';
import { Tabs } from 'antd';
import { Steps } from 'antd';

使用组件

  ReactDOM.render(
        <Tabs defaultActiveKey="1" onChange={callback}>
            <TabPane tab="Tab 1" key="1"><DatePicker /></TabPane>
            <TabPane tab="Tab 2" key="2">Content of Tab Pane 2</TabPane>
            <TabPane tab="Tab 3" key="3">Content of Tab Pane 3</TabPane>
        </Tabs>
        , mountNode);

常用插件

到目前为止，我们在

index.html

文件中手动引入所有资源，然而随着应用程序增长，并且一旦开始对
文件名使用哈希(hash)]并输出多个 bundle，手动地对 index.html
文件进行管理，一切就会变得困难起来。然而，可以通过一些插件，会使这个过程更容易操控。

HtmlWebpackPlugin

HtmlWebpackPlugin 可以重新根据webpack.config.js中的配置重新生成index.html.

安装

cnpm install --save-dev html-webpack-plugin

配置

 const HtmlWebpackPlugin = require('html-webpack-plugin');
  ...
 plugins: [
  new HtmlWebpackPlugin({
   title: 'Output Management'
   })
],

如果你在代码编辑器中将 index.html 打开，你就会看到 HtmlWebpackPlugin 创建了一个全新的文件，所有的 bundle 会自动添加到 html 中。

clean-webpack-plugin

你可能已经注意到，由于过去的指南和代码示例遗留下来，导致我们的/dist文件夹相当杂乱。webpack 会生成文件，然后将这些文件放置在/dist文件夹中，但是 webpack 无法追踪到哪些文件是实际在项目中用到的。
通常，在每次构建前清理/dist文件夹，是比较推荐的做法，因此只会生成用到的文件。让我们完成这个需求。

安装

cnpm install clean-webpack-plugin --save-dev

配置

 const CleanWebpackPlugin = require('clean-webpack-plugin');

plugins: [
  new CleanWebpackPlugin(['dist']),
  new HtmlWebpackPlugin({
    title: 'Output Management'
  })
],

webpack实时刷新

每次要编译代码时，手动运行 npm run build 就会变得很麻烦。
webpack 中有几个不同的选项，可以帮助你在代码发生变化后自动编译代码：
*webpack's Watch Mode
*webpack-dev-server
*webpack-dev-middleware

webpack-dev-server

本文主要介绍下webpack-dev-server，webpack-dev-server不仅能够自动build，而且还能够自动刷新浏览器。

安装webpack-dev-server

cnpm install --save-dev webpack-dev-server

配置webpack-dev-server

在webpack.config.js中增加如下配置：

devServer: {
contentBase: './dist'
},

然后在package.json中增加如下script：

"start": "webpack-dev-server --open",

现在，我们可以在命令行中运行 npm start，就会看到浏览器自动加载页面。如果现在修改和保存任意源文件，web 服务器就会自动重新加载编译后的代码。试一下！

webpack-dev-middleware

使用webpack-dev-middleware可以考虑和express 等nodejs 的server结合使用，具体使用参考https://doc.webpack-china.org/guides/development/#-webpack-dev-middleware。

source map

当 webpack 打包源代码时，可能会很难追踪到错误和警告在源代码中的原始位置。例如，如果将三个源文件（a.js,b.js和c.js）打包到一个 bundle（bundle.js）中，而其中一个源文件包含一个错误，那么堆栈跟踪就会简单地指向到
bundle.js。这并通常没有太多帮助，因为你可能需要准确地知道错误来自于哪个源文件。
为了更容易地追踪错误和警告，JavaScript 提供了source map(http://blog.teamtreehouse.com/introduction-source-maps)
功能，将编译后的代码映射回原始源代码。如果一个错误来自于
b.js，source map 就会明确的告诉你。
source map 有很多不同的选项可用，请务必仔细阅读它们，以便可以根据需要进行配置。对于本指南，我们使用inline-source-map选项

配置

...
devtool: 'inline-source-map',
...

更多详细额配置参考：
https://doc.webpack-china.org/configuration/devtool

react学习资源

中文文档
https://doc.react-china.org/

Ant Design 学习资源

文档参考链接
https://design.alipay.com/develop/mobile/introduce