omit webpack.config

WarrenJones · Oct 10, 2019 · cc52dee · cc52dee
1 parent dda6649
commit cc52dee
Show file tree

Hide file tree

Showing 3 changed files with 106 additions and 3 deletions.
diff --git a/dist/reactTurnPlate.js b/dist/reactTurnPlate.js
@@ -14,6 +14,8 @@ var _propTypes = require("prop-types");
 
 var _propTypes2 = _interopRequireDefault(_propTypes);
 
+var _utils = require("./utils");
+
 require("./turnplate.scss");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -140,8 +142,14 @@ var ReactTurnPlate = function (_React$Component) {
         this.refs.turnplateBorder.style.backgroundImage = "url(" + background_2 + ")";
       }
 
-      this._flashTimer = setTimeout(this._outDiscFlash, this.outDiskDiffTimer);
-      // this._flashTimer = this.requestInterval(this._outDiscFlash, this.outDiskDiffTimer);
+      this._flashTimer = (0, _utils.requestTimeout)(this._outDiscFlash, this.outDiskDiffTimer);
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      if (this._flashTimer) {
+        (0, _utils.clearRequestTimeout)(this._flashTimer);
+      }
     }
   }, {
     key: "_initFlash",
@@ -248,7 +256,7 @@ var ReactTurnPlate = function (_React$Component) {
       //如果奖品来了，并且不是justRotate
 
       if (award && !justRotate) {
-        clearTimeout(this._flashTimer);
+        (0, _utils.clearRequestTimeout)(this._flashTimer);
         this.setState({ rotating: false });
         rotateFinish(award);
       }

diff --git a/dist/utils.js b/dist/utils.js
@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+	value: true
+});
+var requestAnimFrame = function () {
+	return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function ( /* function */callback, /* DOMElement */element) {
+		window.setTimeout(callback, 1000 / 60);
+	};
+}();
+
+var requestTimeout = exports.requestTimeout = function requestTimeout(fn, delay) {
+	if (!window.requestAnimationFrame && !window.webkitRequestAnimationFrame && !(window.mozRequestAnimationFrame && window.mozCancelRequestAnimationFrame) && // Firefox 5 ships without cancel support
+	!window.oRequestAnimationFrame && !window.msRequestAnimationFrame) return window.setTimeout(fn, delay);
+
+	var start = new Date().getTime(),
+	    handle = new Object();
+
+	function loop() {
+		var current = new Date().getTime(),
+		    delta = current - start;
+
+		delta >= delay ? fn.call() : handle.value = requestAnimFrame(loop);
+	};
+
+	handle.value = requestAnimFrame(loop);
+	return handle;
+};
+
+/**
+ * Behaves the same as clearTimeout except uses cancelRequestAnimationFrame() where possible for better performance
+ * @param {int|object} fn The callback function
+ */
+var clearRequestTimeout = exports.clearRequestTimeout = function clearRequestTimeout(handle) {
+	window.cancelAnimationFrame ? window.cancelAnimationFrame(handle.value) : window.webkitCancelAnimationFrame ? window.webkitCancelAnimationFrame(handle.value) : window.webkitCancelRequestAnimationFrame ? window.webkitCancelRequestAnimationFrame(handle.value) : /* Support for legacy API */
+	window.mozCancelRequestAnimationFrame ? window.mozCancelRequestAnimationFrame(handle.value) : window.oCancelRequestAnimationFrame ? window.oCancelRequestAnimationFrame(handle.value) : window.msCancelRequestAnimationFrame ? window.msCancelRequestAnimationFrame(handle.value) : clearTimeout(handle);
+};
diff --git a/webpack.config.js b/webpack.config.js
@@ -0,0 +1,58 @@
+/*** webpack.config.js ***/
+const path = require("path");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const htmlWebpackPlugin = new HtmlWebpackPlugin({
+  template: path.join(__dirname, "example/index.html"),
+  filename: "./index.html"
+});
+module.exports = {
+  entry: path.join(__dirname, "example/index.js"),
+  module: {
+    rules: [
+      {
+        test: /\.(js|jsx)$/,
+        use: "babel-loader",
+        exclude: /node_modules/
+      },
+      {
+        test: /\.scss$/,
+        use: [
+          {
+            loader: "style-loader" // 将 JS 字符串生成为 style 节点
+          },
+          {
+            loader: "css-loader" // 将 CSS 转化成 CommonJS 模块
+          },
+          {
+            loader: "sass-loader" // 将 Sass 编译成 CSS
+          },
+          {
+            loader: "postcss-loader"
+          }
+        ]
+      },
+      {
+        // 增加加载图片的规则
+        test: /\.(png|svg|jpg|gif|svga|mp3)$/,
+        use: [
+          {
+            loader: "file-loader",
+            // options: {
+            //   outputPath: "../img/",
+            //   publicPath: "/public/webpack/img/",
+            //   name: "[name][hash].[ext]"
+            // }
+          }
+        ]
+      },
+    ]
+  },
+  plugins: [htmlWebpackPlugin],
+  resolve: {
+    extensions: [".js", ".jsx"]
+  },
+  devServer: {
+    port: 3001
+  },
+  devtool:'#eval-source-map'
+};