webpack3出来好久,决定试用一下。
- mkdir eee
- cd eee
- npm init -y
- npm i anujs react-addons-css-transition-group --save
- npm i babel-core babel-loader babel-preset-es2015 babel-preset-react webpack@3.0 --save-dev
最后生成的package.json应该是这样
- {
- "name": "eee","version": "1.0.0","description": "","main": "index.js","scripts": {
- "test": "echo \"Error: no test specified\" && exit 1"
- },"keywords": [],"author": "","license": "ISC","dependencies": {
- "anujs": "^1.0.6","react-addons-css-transition-group": "^15.6.0"
- },"devDependencies": {
- "babel-core": "^6.25.0","babel-loader": "^7.1.1","babel-preset-es2015": "^6.24.1","babel-preset-react": "^6.24.1","babel-plugin-transform-es2015-classes": "^6.24.1","webpack": "^3.0.0"
- }
- }
我们用到babel,需要用.babelrc
- {
- "presets": [
- ["es2015",{ "modules": false }],"react"
- ],"plugins": [
- [
- "transform-es2015-classes",{
- "loose": true
- }
- ]
- ]
- }
根目录创建main.js,用法一切如React
- import React from "react";
- import ReactDOM from "react-dom";
- import ReactCSSTransitionGroup from "react-addons-css-transition-group"
- var data = ["one","two","three"];
- class Control extends React.Component {
- constructor(props) {
- super(props);
- this.state = {
- items: data.splice(0,data.length)
- };
- this.addItem = this.addItem.bind(this);
- this.removeItem = this.removeItem.bind(this);
- }
- addItem() {
- var a = data.pop()
- var newItems = this.state.items.concat(a || "add"+ (new Date-0));
- this.setState({
- items: newItems
- });
- }
- removeItem(i) {
- var newItems = this.state.items;
- var drop = newItems.splice(i,1)
- if(drop.length){
- [].push.apply(data,drop)
- }
- this.setState({
- items: newItems
- });
- }
- render() {
- var $this = this;
- var List = this.state.items.map(function(value,index) {
- return (
- <div key={value} onClick={$this.removeItem.bind($this,index)}>
- {" "}{value}
- </div>
- );
- });
- return (
- <div>
- <button onClick={this.addItem}>add Item</button>
- <ReactCSSTransitionGroup
- transitionName="example"
- transitionEnterTimeout={500}
- transitionLeaveTimeout={300}
- >
- {List}
- </ReactCSSTransitionGroup>
- </div>
- );
- }
- }
- class Hello extends React.Component {
- render() {
- return (
- <div>
- {` 测试anujs与React动画组件的兼容 `}
- <Control data={data}/>
- </div>
- );
- }
- }
- window.onload = function() {
- ReactDOM.render(<Hello />,document.body);
- };
然后创建index.html
- <!DOCTYPE html>
- <html>
- <head>
- <Meta http-equiv="X-UA-Compatible" content="IE=edge">
- <Meta charset="utf-8">
- <title>anujs</title>
- <style>
- .example-enter {
- opacity: 0.01;
- }
- .example-enter.example-enter-active {
- opacity: 1;
- transition: opacity 500ms ease-in;
- }
- .example-leave {
- opacity: 1;
- }
- .example-leave.example-leave-active {
- opacity: 0.01;
- transition: opacity 300ms ease-in;
- }
- </style>
- <Meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1">
- <script src='./dist/index.js'></script>
- </head>
- <body>
- </body>
- </html>
最后的魔术由webpack完成,建立webpack.config.js
- const path = require("path");
- const webpack = require("webpack");
- module.exports = {
- entry: "./main.js",output: {
- path: path.resolve(__dirname,"dist"),filename: "index.js"
- },resolve: {
- alias: {
- react: "anujs","react-dom": "anujs"
- }
- },module: {
- rules: [
- {
- test: /\.jsx?$/,exclude: /node_modules/,loader: "babel-loader"
- }
- ]
- }
- }
然后控制台下输入`webpack --config webpack.config`
然后打开浏览器访问页面
动画生效了!