links123.com
/
ts-sdk
关注 5
点赞 0
派生 0
代码 工单 0 合并请求 0 版本发布 0 百科 动态
浏览代码

webpack as bundle tool

Paul 6 年前
父节点
adc0bdae14
当前提交
1ec05cd4a8
共有 8 个文件被更改，包括 1514 次插入 和 2051 次删除
合并视图 显示文件统计
  1. 9
    4
      package.json
  2. 0
    6
      public/index.html
  3. 3
    3
      src/callback.ts
  4. 3
    3
      src/example/main.ts
  5. 24
    31
      src/index.ts
  6. 2
    1
      tsconfig.json
  7. 35
    0
      webpack.config.js
  8. 1438
    2003
      yarn.lock

+ 9
- 4
package.json 查看文件

4 
   "description": "",
 4 
   "description": "",
5 
   "main": "index.js",
 5 
   "main": "index.js",
6 
   "scripts": {
 6 
   "scripts": {
7 
+    "start": "webpack-dev-server  --mode development",
7 
     "test": "jest",
 8 
     "test": "jest",
8 
-    "start": "parcel public/index.html"
9 
+    "build": "webpack --config webpack.config.js"
9 
   },
 10 
   },
10 
   "author": "",
 11 
   "author": "",
11 
   "license": "ISC",
 12 
   "license": "ISC",
12 
   "dependencies": {
 13 
   "dependencies": {
13 
     "crypto-js": "^3.1.9-1",
 14 
     "crypto-js": "^3.1.9-1",
14 
-    "node-int64": "^0.4.0",
15 
-    "parcel-bundler": "^1.12.3"
15 
+    "node-int64": "^0.4.0"
16 
   },
 16 
   },
17 
   "devDependencies": {
 17 
   "devDependencies": {
18 
     "@types/jest": "^24.0.11",
 18 
     "@types/jest": "^24.0.11",
19 
+    "html-webpack-plugin": "^3.2.0",
19 
     "jest": "^24.5.0",
 20 
     "jest": "^24.5.0",
20 
     "ts-jest": "^24.0.0",
 21 
     "ts-jest": "^24.0.0",
21 
-    "typescript": "^3.3.4000"
22 
+    "ts-loader": "^6.0.0",
23 
+    "typescript": "^3.3.4000",
24 
+    "webpack": "^4.30.0",
25 
+    "webpack-cli": "^3.3.2",
26 
+    "webpack-dev-server": "^3.3.1"
22 
   }
 27 
   }
23 
 }
 28 
 }

+ 0
- 6
public/index.html 查看文件

1 
-<!DOCTYPE html>
2 
-<htm>
3 
-  <head>
4 
-    <script src="../src/example/main.ts" type="text/javascript"></script>
5 
-  </head>
6 
-</htm>

+ 3
- 3
src/callback.ts 查看文件

1 
 export interface readyStateCallback {
 1 
 export interface readyStateCallback {
2 
-  onopen(ev: Event);
3 
-  onerror(ev: Event);
4 
-  onclose(ev: Event);
2 
+  onOpen(ev: Event);
3 
+  onError(ev: Event);
4 
+  onClose(ev: Event);
5 
 }
 5 
 }
6
6
7 
 export interface callback {
 7 
 export interface callback {

+ 3
- 3
src/example/main.ts 查看文件

1 
-
2 
 import { Client } from "../index";
 1 
 import { Client } from "../index";
3 
-const client = new Client("ws://127.0.0.1:8081", null)
4
2
5 
-console.log("test", "a")
3 
+const client = new Client("ws://127.0.0.1:8081", null)
4 
+console.log(client.setRequestProperty("name", "stri"))
5 
+console.log(client.getRequestProperty("name"))

+ 24
- 31
src/index.ts 查看文件

7 
  * Client ws client, 单例模式, 负责维护连接
 7 
  * Client ws client, 单例模式, 负责维护连接
8 
  */
 8 
  */
9 
 export class Client {
 9 
 export class Client {
10 
-  public callback: callback;
11 
-  public requestHeader: string;
12 
-  public responseHeader: string;
13 
-  public maxPayload: number;
14 
-  public url: string;
15 
-  public reconnectTimes: number;
16 
-  public reconnectLock: boolean;
17 
-  public socket: WebSocket;
18 
-  public readyStateCallback: readyStateCallback;
10 
+  private requestCallback: callback;
11 
+  private requestHeader: string;
12 
+  private responseHeader: string;
13 
+  private maxPayload: number;
14 
+  private url: string;
15 
+  private reconnectTimes: number;
16 
+  private reconnectLock: boolean;
17 
+  private socket: WebSocket;
18 
+  private readyStateCallback: readyStateCallback;
19
19
20 
   constructor(url: string, readyStateCallback: readyStateCallback) {
 20 
   constructor(url: string, readyStateCallback: readyStateCallback) {
21 
-    if (!('WebSocket' in window)) {
22 
-      return;
23 
-    }
24 
-
25 
-    this.requestHeader = '';
26 
     this.maxPayload = constant.MAX_PAYLOAD;
 21 
     this.maxPayload = constant.MAX_PAYLOAD;
27 
     this.url = url;
 22 
     this.url = url;
28 
     this.readyStateCallback = readyStateCallback;
 23 
     this.readyStateCallback = readyStateCallback;
29 
-    this.reconnectTimes = 0;
30 
-    this.reconnectLock = false;
31
24
32 
     this.socket = this.connect();
 25 
     this.socket = this.connect();
33 
   }
 26 
   }
100 
     let _this = this;
 93 
     let _this = this;
101 
     let sequence = new Date().getTime();
 94 
     let sequence = new Date().getTime();
102 
     let listener = Utils.crc32(operator) + sequence;
 95 
     let listener = Utils.crc32(operator) + sequence;
103 
-    this.callback[listener] = function(data) {
96 
+    this.requestCallback[listener] = function(data) {
104 
       let code = _this.getResponseProperty('code');
 97 
       let code = _this.getResponseProperty('code');
105 
       if (typeof code !== 'undefined') {
 98 
       if (typeof code !== 'undefined') {
106 
         let message = _this.getResponseProperty('message');
 99 
         let message = _this.getResponseProperty('message');
126 
         callback.onEnd();
 119 
         callback.onEnd();
127 
       }
 120 
       }
128
121
129 
-      delete _this.callback[listener];
122 
+      delete _this.requestCallback[listener];
130 
     };
 123 
     };
131
124
132 
     const p = new Packet();
 125 
     const p = new Packet();
147
140
148 
   // 添加消息监听
 141 
   // 添加消息监听
149 
   addMessageListener(operator, listener) {
 142 
   addMessageListener(operator, listener) {
150 
-    this.callback[Utils.crc32(operator)] = listener;
143 
+    this.requestCallback[Utils.crc32(operator)] = listener;
151 
   }
 144 
   }
152
145
153 
   // 移除消息监听
 146 
   // 移除消息监听
154 
   removeMessageListener(operator) {
 147 
   removeMessageListener(operator) {
155 
-    delete this.callback[Utils.crc32(operator)];
148 
+    delete this.requestCallback[Utils.crc32(operator)];
156 
   }
 149 
   }
157
150
158 
   // 获取socket的链接状态
 151 
   // 获取socket的链接状态
217 
       console.info('websocket connected');
 210 
       console.info('websocket connected');
218 
       _this.reconnectTimes = 0;
 211 
       _this.reconnectTimes = 0;
219 
       if (
 212 
       if (
220 
-        readyStateCallback.hasOwnProperty('onopen') &&
221 
-        typeof readyStateCallback.onopen === 'function'
213 
+        readyStateCallback.hasOwnProperty('onOpen') &&
214 
+        typeof readyStateCallback.onOpen === 'function'
222 
       ) {
 215 
       ) {
223 
-        readyStateCallback.onopen(ev);
216 
+        readyStateCallback.onOpen(ev);
224 
       }
 217 
       }
225 
     };
 218 
     };
226
219
228 
       console.info('websocket disconnected');
 221 
       console.info('websocket disconnected');
229 
       _this.reconnect();
 222 
       _this.reconnect();
230 
       if (
 223 
       if (
231 
-        readyStateCallback.hasOwnProperty('onclose') &&
232 
-        typeof readyStateCallback.onclose === 'function'
224 
+        readyStateCallback.hasOwnProperty('onClose') &&
225 
+        typeof readyStateCallback.onClose === 'function'
233 
       ) {
 226 
       ) {
234 
-        readyStateCallback.onclose(ev);
227 
+        readyStateCallback.onClose(ev);
235 
       }
 228 
       }
236 
     };
 229 
     };
237
230
239 
       console.info('websocket error disconnected');
 232 
       console.info('websocket error disconnected');
240 
       _this.reconnect();
 233 
       _this.reconnect();
241 
       if (
 234 
       if (
242 
-        readyStateCallback.hasOwnProperty('onerror') &&
243 
-        typeof readyStateCallback.onerror === 'function'
235 
+        readyStateCallback.hasOwnProperty('onError') &&
236 
+        typeof readyStateCallback.onError === 'function'
244 
       ) {
 237 
       ) {
245 
-        readyStateCallback.onerror(ev);
238 
+        readyStateCallback.onError(ev);
246 
       }
 239 
       }
247 
     };
 240 
     };
248
241
259 
             }
 252 
             }
260
253
261 
             let operator = Number(packet.operator) + Number(packet.sequence);
 254 
             let operator = Number(packet.operator) + Number(packet.sequence);
262 
-            if (_this.callback.hasOwnProperty(operator)) {
255 
+            if (_this.requestCallback.hasOwnProperty(operator)) {
263 
               if (packet.body === '') {
 256 
               if (packet.body === '') {
264 
                 packet.body = '{}';
 257 
                 packet.body = '{}';
265 
               }
 258 
               }
266 
               _this.responseHeader = packet.header;
 259 
               _this.responseHeader = packet.header;
267 
-              _this.callback[operator](JSON.parse(packet.body));
260 
+              _this.requestCallback[operator](JSON.parse(packet.body));
268 
             }
 261 
             }
269 
             if (operator !== 0 && packet.body !== 'null') {
 262 
             if (operator !== 0 && packet.body !== 'null') {
270 
               console.info('receive data', packet.body);
 263 
               console.info('receive data', packet.body);

+ 2
- 1
tsconfig.json 查看文件

3 
   "compilerOptions": {
 3 
   "compilerOptions": {
4 
     "target": "es6",
 4 
     "target": "es6",
5 
     "moduleResolution": "node",
 5 
     "moduleResolution": "node",
6 
+    "strictNullChecks": false,
6 
     "alwaysStrict": true,
 7 
     "alwaysStrict": true,
7 
     "sourceMap": true,
 8 
     "sourceMap": true,
8 
     "declaration": true,
 9 
     "declaration": true,
9 
     "rootDir": "src",
 10 
     "rootDir": "src",
10 
-    "outDir": "dist",
11 
+    "outDir": "dist/",
11 
     "declarationDir": "dist/types"
 12 
     "declarationDir": "dist/types"
12 
   },
 13 
   },
13 
   "include": ["src/**/*"]
 14 
   "include": ["src/**/*"]

+ 35
- 0
webpack.config.js 查看文件

1 
+const path = require('path');
2 
+const HtmlWebpackPlugin = require('html-webpack-plugin');
3 
+
4 
+module.exports = {
5 
+    mode: 'development',
6 
+    entry: './src/example/main.ts',
7 
+    devtool: 'inline-source-map',
8 
+    devServer: {
9 
+      contentBase: './dist',
10 
+      compress: true,
11 
+      hot: true,
12 
+    },
13 
+    plugins: [
14 
+      new HtmlWebpackPlugin({
15 
+          title: 'index'
16 
+      })
17 
+    ],
18 
+    output: {
19 
+        filename: 'main.js',
20 
+        path: path.resolve(__dirname, 'dist')
21 
+    },
22 
+    module: {
23 
+        rules: [{
24 
+            test: /\.ts$/,
25 
+            use: "ts-loader"
26 
+        }]
27 
+    },
28 
+    resolve: {
29 
+        extensions: [
30 
+            '.ts',
31 
+            '.js',
32 
+            '.tsx'
33 
+        ]
34 
+    }
35 
+};

+ 1438
- 2003
yarn.lock
文件差异内容过多而无法显示
查看文件