mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-01-18 06:03:38 +08:00
Code Issues Actions 28 Packages Projects Releases Wiki Activity

upgrade webpack config

Browse Source
This commit is contained in:
afc163 2016-01-14 02:37:52 +08:00
parent fae30906b2
commit 73b806e159
6 changed files with 117 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
nico.js
View File

@ -6,7 +6,7 @@ var inspect = require('util').inspect;
var Busboy = require('busboy');
var chalk = require('chalk');
var webpackMiddleware = require('webpack-dev-middleware');
var webpackConfig = require('./webpack.deploy.config');
var webpackConfig = require('./webpack.config');
var webpackCompiler = webpack(webpackConfig);
var handler;

1
scripts/demo.js
View File

@ -36,6 +36,7 @@ window.ReactDOM = ReactDOM;
window['object-assign'] = require('object-assign');
window['classnames'] = require('classnames');
window['reqwest'] = require('reqwest');
require('./home')();
antd.DatePicker.locale = {
en_US: require('../components/date-picker/locale/en_US'),

203
scripts/home.js
View File

@ -4,105 +4,112 @@ import { QueueAnim, Icon, Button } from '../index';
import ScrollOverPack from 'rc-scroll-anim/lib/ScrollOverPack';
import TweenOne from 'rc-tween-one';
// 导航处理
function scrollNavEvent() {
const scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
const clientHeight = document.documentElement.clientHeight;
if (scrollTop >= clientHeight) {
header.className = header.className.indexOf('home-nav-bottom') >= 0 ? header.className : header.className + ' home-nav-bottom';
} else {
header.className = header.className.replace(/home-nav-bottom/ig, '');
}
}
$(window).off('scroll.scrollNavEvent');
$(window).on('scroll.scrollNavEvent', scrollNavEvent);
class Banner extends React.Component {
constructor() {
super(...arguments);
}
typeFunc(a) {
if (a.key === 'line') {
return 'right';
} else if (a.key === 'button') {
return 'bottom';
module.exports = function() {
InstantClickChangeFns.push(function() {
if (!document.getElementById('banner')) {
return;
}
// 导航处理
function scrollNavEvent() {
const scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
const clientHeight = document.documentElement.clientHeight;
if (scrollTop >= clientHeight) {
header.className = header.className.indexOf('home-nav-bottom') >= 0 ? header.className : header.className + ' home-nav-bottom';
} else {
header.className = header.className.replace(/home-nav-bottom/ig, '');
}
}
return 'left';
}
render() {
return (
<div>
<QueueAnim className="banner-text-wrapper" type={this.typeFunc} delay={300}>
<h2 key="h2">ANT <p>DESIGN</p></h2>
<p key="content">一个 UI 设计语言</p>
<span className="line" key="line"/>
<a key="button" href="/docs/spec/introduce"><Icon type="smile-circle"/>开始探索</a>
$(window).off('scroll.scrollNavEvent');
$(window).on('scroll.scrollNavEvent', scrollNavEvent);
class Banner extends React.Component {
constructor() {
super(...arguments);
}
typeFunc(a) {
if (a.key === 'line') {
return 'right';
} else if (a.key === 'button') {
return 'bottom';
}
return 'left';
}
render() {
return (
<div>
<QueueAnim className="banner-text-wrapper" type={this.typeFunc} delay={300}>
<h2 key="h2">ANT <p>DESIGN</p></h2>
<p key="content">一个 UI 设计语言</p>
<span className="line" key="line"/>
<a key="button" href="/docs/spec/introduce"><Icon type="smile-circle"/>开始探索</a>
</QueueAnim>
<TweenOne className='down' vars={[{opacity: 1},{y: 10, duration: 800, yoyo: true, repeat: -1}]}>
<Icon type="down"/>
</TweenOne>
</div>
)
}
}
ReactDOM.render(<Banner />, document.getElementById('banner'));
// page1
ReactDOM.render((
<ScrollOverPack className="content-wrapper">
<TweenOne key="image" className="image1 image-wrapper" vars={{x: 0, opacity: 1, duration: 550}}
style={{transform: 'translateX(-100px)', opacity: 0}}/>
<QueueAnim className="text-wrapper" delay={300} key="text" duration={550} leaveReverse>
<h2 key="h2">最佳实践</h2>
<p key="p" style={{maxWidth: 310}}>近一年的中后台设计实践，积累了大量的优秀案例。</p>
<div key="button"><Button type="primary" size="large" onClick={()=>{window.location.href='/docs/practice/cases'}}>了解更多<Icon
type="right"/></Button></div>
</QueueAnim>
<TweenOne className='down' vars={[{opacity: 1},{y: 10, duration: 800, yoyo: true, repeat: -1}]}>
<Icon type="down"/>
</TweenOne>
</div>
)
}
</ScrollOverPack>
), document.getElementById('page1'));
//page2
ReactDOM.render((
<ScrollOverPack className="content-wrapper">
<QueueAnim className="text-wrapper left-text" delay={300} key="text" duration={550} type='bottom' leaveReverse>
<h2 key="h2">设计模式</h2>
<p key="p" style={{maxWidth: 260}}>总结中后台设计中反复出现的问题，并提供相应的解决方案。</p>
<div key="button"><Button type="primary" size="large"
onClick={()=>{window.location.href='/docs/pattern/navigation'}}>了解更多<Icon type="right"/></Button>
</div>
</QueueAnim>
<TweenOne key="image" className="image2 image-wrapper" vars={{x: 0, opacity: 1, delay: 300, duration: 550}}
style={{transform: 'translateX(100px)', opacity: 0}}/>
</ScrollOverPack>
), document.getElementById('page2'));
// page3
ReactDOM.render((
<ScrollOverPack className="content-wrapper">
<TweenOne key="image" className="image3 image-wrapper" vars={{x: 0, opacity: 1, duration: 550}}
style={{transform: 'translateX(-100px)', opacity: 0}}/>
<QueueAnim className="text-wrapper" delay={300} key="text" duration={550} leaveReverse style={{top: '40%'}}>
<h2 key="h2">丰富的基础组件</h2>
<p key="p" style={{maxWidth: 280}}>丰富、灵活、实用的基础组件，为业务产品提供强有力的设计支持。</p>
<div key="button"><Button type="primary" size="large"
onClick={()=>{window.location.href='/docs/react/introduce'}}>了解更多<Icon
type="right"/></Button></div>
</QueueAnim>
</ScrollOverPack>
), document.getElementById('page3'));
// page4
ReactDOM.render((
<ScrollOverPack className="content-wrapper">
<QueueAnim className="text-wrapper-bottom" delay={300} key="text" duration={550} leaveReverse type="bottom">
<h2 key="h2">微小·确定·幸福</h2>
<p key="p">这是一套致力于提升『用户』和『设计者』使用体验的中后台设计语言。</p>
</QueueAnim>
<TweenOne key="image" className="image4 bottom-wrapper" vars={{y: 0, opacity: 1, duration: 550, delay: 550}}
style={{transform: 'translateY(50px)', opacity: 0}}/>
</ScrollOverPack>
), document.getElementById('page4'));
});
}
ReactDOM.render(<Banner />, document.getElementById('banner'));
// page1
ReactDOM.render((
<ScrollOverPack className="content-wrapper">
<TweenOne key="image" className="image1 image-wrapper" vars={{x: 0, opacity: 1, duration: 550}}
style={{transform: 'translateX(-100px)', opacity: 0}}/>
<QueueAnim className="text-wrapper" delay={300} key="text" duration={550} leaveReverse>
<h2 key="h2">最佳实践</h2>
<p key="p" style={{maxWidth: 310}}>近一年的中后台设计实践，积累了大量的优秀案例。</p>
<div key="button"><Button type="primary" size="large" onClick={()=>{window.location.href='/docs/practice/cases'}}>了解更多<Icon
type="right"/></Button></div>
</QueueAnim>
</ScrollOverPack>
), document.getElementById('page1'));
//page2
ReactDOM.render((
<ScrollOverPack className="content-wrapper">
<QueueAnim className="text-wrapper left-text" delay={300} key="text" duration={550} type='bottom' leaveReverse>
<h2 key="h2">设计模式</h2>
<p key="p" style={{maxWidth: 260}}>总结中后台设计中反复出现的问题，并提供相应的解决方案。</p>
<div key="button"><Button type="primary" size="large"
onClick={()=>{window.location.href='/docs/pattern/navigation'}}>了解更多<Icon type="right"/></Button>
</div>
</QueueAnim>
<TweenOne key="image" className="image2 image-wrapper" vars={{x: 0, opacity: 1, delay: 300, duration: 550}}
style={{transform: 'translateX(100px)', opacity: 0}}/>
</ScrollOverPack>
), document.getElementById('page2'));
// page3
ReactDOM.render((
<ScrollOverPack className="content-wrapper">
<TweenOne key="image" className="image3 image-wrapper" vars={{x: 0, opacity: 1, duration: 550}}
style={{transform: 'translateX(-100px)', opacity: 0}}/>
<QueueAnim className="text-wrapper" delay={300} key="text" duration={550} leaveReverse style={{top: '40%'}}>
<h2 key="h2">丰富的基础组件</h2>
<p key="p" style={{maxWidth: 280}}>丰富、灵活、实用的基础组件，为业务产品提供强有力的设计支持。</p>
<div key="button"><Button type="primary" size="large"
onClick={()=>{window.location.href='/docs/react/introduce'}}>了解更多<Icon
type="right"/></Button></div>
</QueueAnim>
</ScrollOverPack>
), document.getElementById('page3'));
// page4
ReactDOM.render((
<ScrollOverPack className="content-wrapper">
<QueueAnim className="text-wrapper-bottom" delay={300} key="text" duration={550} leaveReverse type="bottom">
<h2 key="h2">微小·确定·幸福</h2>
<p key="p">这是一套致力于提升『用户』和『设计者』使用体验的中后台设计语言。</p>
</QueueAnim>
<TweenOne key="image" className="image4 bottom-wrapper" vars={{y: 0, opacity: 1, duration: 550, delay: 550}}
style={{transform: 'translateY(50px)', opacity: 0}}/>
</ScrollOverPack>
), document.getElementById('page4'));

1
site/templates/home.html
View File

@ -247,5 +247,4 @@
color: #eee;
}
</style>
<script src="{{static_url('../dist/home.js')}}"></script>
{% endblock %}

2
webpack.config.js
View File

@ -4,9 +4,7 @@ var path = require('path');
var pkg = require('./package');
var entry = {};
entry['index'] = './scripts/importCss.js';
entry['demo'] = './scripts/demo.js';
entry['home'] = './scripts/home.js';
module.exports = {
entry: entry,

11
webpack.deploy.config.js
View File

@ -1,3 +1,12 @@
var webpack = require('webpack');
var config = require('./webpack.config');
delete config.entry.index;
delete config.devtool;
config.plugins.push(new webpack.optimize.UglifyJsPlugin({
sourceMap: false,
output: {
ascii_only: true
}
}));
module.exports = config;