博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
webpack+es2015+react+Ant Design纲领
阅读量:6580 次
发布时间:2019-06-24

本文共 7285 字,大约阅读时间需要 24 分钟。

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

官方文档

参考webpack官方文档,点击一下链接

安装nodejs

忽略

安装cnpm

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

npm install -g cnpm

安装webpack

本地安装

cnpm install --save-dev webpack cnpm install --save-dev webpack@

全局安装

cnpm install --global webpack

创建webpack项目

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

bundle 文件

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

      Getting Started              

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

        Getting Started-          -    +         

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-loadercnpm 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参考:

安装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-devcnpm install react-dom --save-dev

编写react组件

import React from 'react';export default class Hello extends React.Component {    render() {        return 

hi alienzhou!

fdsayoyoyofdasfdsa1

; }}

使用react组件

首先引入react组件,代码如下:

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

然后使用组件,代码如下:

var element = document.createElement('div');var mountNode = element;    ReactDOM.render(
, element); ReactDOM.render(
,element); ReactDOM.render(
, 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(        
Content of Tab Pane 2
Content of Tab Pane 3
, 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结合使用,具体使用参考。

source map

当 webpack 打包源代码时,可能会很难追踪到错误和警告在源代码中的原始位置。例如,如果将三个源文件(a.js,b.jsc.js)打包到一个 bundle(bundle.js)中,而其中一个源文件包含一个错误,那么堆栈跟踪就会简单地指向到

bundle.js。这并通常没有太多帮助,因为你可能需要准确地知道错误来自于哪个源文件。
为了更容易地追踪错误和警告,JavaScript 提供了source map(
功能,将编译后的代码映射回原始源代码。如果一个错误来自于
b.js,source map 就会明确的告诉你。
source map 有很多可用,请务必仔细阅读它们,以便可以根据需要进行配置。对于本指南,我们使用inline-source-map选项

配置

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

更多详细额配置参考:

react学习资源

  • 中文文档

Ant Design 学习资源

文档参考链接

转载地址:http://kpino.baihongyu.com/

你可能感兴趣的文章
hdu 4300 Clairewd’s message(KMP)
查看>>
burp suite 使用教程详解(外文翻译转)
查看>>
Python循环
查看>>
Flume研究心得
查看>>
概要文件的创建
查看>>
虚拟域名设置步骤
查看>>
Oracle的substr函数简单用法
查看>>
knockout.js模板绑定之利用Underscore.js模板引擎示例
查看>>
马婕 2014MBA专硕考试报刊选读 5 朱令案悬而未决引起全社会的关注(转)
查看>>
【iOS开发必备指南合集】申请企业级IDP、真机调试、游戏接入GameCenter 指南(实现仿官方的成就提示)、游戏接入OpenFeint指南;...
查看>>
SVN OPS发布总结
查看>>
二维数组旋转45度
查看>>
三种客户端访问wcf服务端的方法 C#
查看>>
c# WebBrowser获取cookie
查看>>
【流媒体】UPnP的工作过程
查看>>
JAVA的堆于栈
查看>>
每日英语:South India's Streetside Coffee Culture
查看>>
你可能不知道UED和UCD
查看>>
利用IFormattable接口自动参数化Sql语句
查看>>
webdriver(python)学习笔记一
查看>>