升级到webpack4

config/webpack.umd.ts

@@ -0,0 +1,47 @@
+import * as path from 'path';
+import * as webpack from 'webpack';
+import ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
+import * as HardSourceWebpackPlugin from 'hard-source-webpack-plugin';
+
+const config: webpack.Configuration = {
+    mode: "production",
+    entry: "./src/index.ts",
+    devtool: "source-map",
+    //输出设置
+    output: {
+        filename: "cad.js",
+        path: path.resolve(__dirname, '../umd'),
+        library: "cad",
+        libraryTarget: "umd"
+    },
+    //项目需要解析的文件拓展名称
+    resolve: {
+        extensions: [".ts", ".tsx", ".js", "json"]
+    },
+    externals: {
+        'three': "THREE"
+    },
+    //模块加载器设置
+    module: {
+        rules: [
+            {
+                test: /\.tsx?$/,
+                exclude: /node_modules/,
+                loader: 'ts-loader',
+                options: {
+                    transpileOnly: true,
+                    experimentalWatchApi: true,
+                },
+            },
+            { test: /\.css$/, loader: ['style-loader', 'css-loader'] },
+            { test: /\.[(jpg)|(png)|(obj)|(json)]$/, loader: "url-loader" },
+        ]
+    },
+
+    plugins: [
+        new HardSourceWebpackPlugin(),
+        new ForkTsCheckerWebpackPlugin({ checkSyntacticErrors: true }),
+    ]
+}
+
+export default config;

package.json

@@ -6,8 +6,10 @@
   "types": "dist/index.d.ts",
   "private": true,
   "scripts": {
-    "build": "tsc & webpack",
+    "build": "tsc",
-    "dev": "tsc -w"
+    "umd": "webpack --config ./config/webpack.umd.ts",
+    "dev": "tsc -w",
+    "type": "ts-node ./utils/copy_type.ts"
   },
   "repository": {
     "type": "git",
@@ -16,14 +18,23 @@
   "author": "cx",
   "license": "ISC",
   "devDependencies": {
-    "@types/node": "^10.1.2",
+    "@types/hard-source-webpack-plugin": "^0.9.0",
-    "@types/three": "^0.92.0",
+    "@types/node": "^10.7.1",
-    "awesome-typescript-loader": "^3.4.1",
+    "@types/three": "^0.92.17",
-    "typescript": "^2.8.3",
+    "@types/uglifyjs-webpack-plugin": "^1.1.0",
-    "uglifyjs-webpack-plugin": "^1.2.5",
+    "@types/webpack": "^4.4.10",
-    "webpack": "^3.10.0"
+    "awesome-typescript-loader": "^5.2.0",
+    "fork-ts-checker-webpack-plugin": "^0.4.8",
+    "hard-source-webpack-plugin": "^0.12.0",
+    "ts-loader": "^4.4.2",
+    "ts-node": "^7.0.1",
+    "typescript": "^3.0.1",
+    "uglifyjs-webpack-plugin": "^1.3.0",
+    "webpack": "^4.16.5",
+    "webpack-cli": "^3.1.0",
+    "webpack-merge": "^4.1.4"
   },
   "dependencies": {
-    "three": "^0.92.0"
+    "three": "^0.95.0"
   }
 }

src/CameraControls.ts

@@ -4,14 +4,6 @@ import { KeyBoard, MouseKey } from './KeyEnum';
 import { Vector3 } from 'three';
 import { Viewer } from './Viewer';
 
-//控制类型
-enum CameraControlsEnabled
-{
-    Rotate = 1,
-    Zoom = 2,
-    Pan = 4,
-}
-
 //相机控制状态
 export enum CameraControlState
 {

src/ColorPalette.ts

@@ -1,4 +1,5 @@
 import * as THREE from 'three';
+import { LineBasicMaterial, MeshBasicMaterial, Color } from 'three';
 const ColorPalette = [
     [255, 0, 0, 255],    //----- 0 - lets make it red for an example
     //[255, 255, 255, 255],//----- 0 - ByBlock - White
@@ -270,19 +271,28 @@ export class ColorMaterial
 {
     private constructor() { }
     private static m_LineMaterialMap = new Map<number, THREE.LineBasicMaterial>();
-    static GetLineMaterial(index): THREE.LineBasicMaterial
+    static GetLineMaterial(index): LineBasicMaterial
     {
         if (this.m_LineMaterialMap.has(index))
             return this.m_LineMaterialMap.get(index);
-        let mat = new THREE.LineBasicMaterial({ color: this.GetColor(index) });
+        let mat = new LineBasicMaterial({ color: this.GetColor(index) });
         this.m_LineMaterialMap.set(index, mat);
         return mat;
     }
+    private static m_BasicMaterialMap = new Map<number, MeshBasicMaterial>();
+    static GetBasicMaterial(index: number): MeshBasicMaterial
+    {
+        if (this.m_BasicMaterialMap.has(index))
+            return this.m_BasicMaterialMap.get(index);
+        let mat = new MeshBasicMaterial({ color: this.GetColor(index) });
+        this.m_BasicMaterialMap.set(index, mat);
+        return mat;
+    }
 
     static GetColor(index: number)
     {
         let rgb = ColorPalette[index];
         if (rgb)
-            return new THREE.Color(rgb[0] / 255, rgb[1] / 255, rgb[2] / 255);
+            return new Color(rgb[0] / 255, rgb[1] / 255, rgb[2] / 255);
     }
 }

src/Text.ts

@@ -35,7 +35,7 @@ export class DbText extends Mesh
 
     geometry.computeBoundingBox();
 
-    super(geometry, ColorMaterial.GetLineMaterial(5));
+    super(geometry, ColorMaterial.GetBasicMaterial(5));
 
     let center = geometry.boundingBox.getCenter(new Vector3());
     this.applyMatrix(MoveMatrix(new Vector3(-center.x, 0, 0)));

src/Viewer.ts

@@ -43,7 +43,7 @@ export class Viewer
       let mesh = PointPick(this, e.offsetX, e.offsetY);
       if (oldMesh)
         oldMesh.material = boardMaterial;
-      if (mesh && mesh.material !== ColorMaterial.GetLineMaterial(1))
+      if (mesh && mesh.material !== ColorMaterial.GetBasicMaterial(1))
       {
         oldMesh = mesh;
         mesh.material = selectMaterial;

src/createBoard.ts

@@ -171,7 +171,7 @@ export function createBoard(boardData: object)
 
                 geo.applyMatrix(boardMat);
 
-                let mesh = new Mesh(geo, ColorMaterial.GetLineMaterial(1));
+                let mesh = new Mesh(geo, ColorMaterial.GetBasicMaterial(1));
                 edges.push(mesh);
                 // let edge = createEdge(geo);
                 // edge.material = new LineBasicMaterial({ color: new Color(1, 0, 0) });

tsconfig.json

@@ -6,16 +6,17 @@
         "outDir": "./dist",
         "target": "es5",
         "lib": [
-            "es2017",
+            "esnext",
             "dom"
         ],
         "types": [
-            "node"
+            "node",
         ],
         "module": "commonjs",
         "experimentalDecorators": true
     },
     "include": [
-        "./src/**/*"
+        "./src/**/*",
+        // "./config/**/*"
     ]
 }

utils/copy_type.ts

@@ -0,0 +1,112 @@
+import * as path from 'path';
+import * as http from 'https';
+import * as fs from "fs";
+
+//修正d.ts中类型定义出现错误的问题,临时修复,因为d.ts并不能完全快速的合并我们的类型修复PR.
+
+/**
+ * 下载文件到指定的文件地址
+ *
+ * @param {string} url
+ * @param {string} filePath
+ */
+function downLoadFile(url: string, filePath: string)
+{
+    if (fs.existsSync(filePath))
+        fs.unlinkSync(filePath);
+    else
+        fs.mkdirSync(path.dirname(filePath));
+    let file = fs.createWriteStream(filePath);
+    http.get(url, function (response)
+    {
+        response.pipe(file);
+    });
+}
+
+/**
+ * 拷贝文件.
+ *
+ * @param {*} source 目标文件的地址
+ * @param {*} targetFile 拷贝到新的地址
+ */
+function copyFileSync(source: string, targetFile: string)
+{
+    //if target is a directory a new file with the same name will be created
+    if (fs.existsSync(targetFile))
+    {
+        if (fs.lstatSync(targetFile).isDirectory())
+        {
+            targetFile = path.join(targetFile, path.basename(source));
+        }
+    }
+    fs.writeFileSync(targetFile, fs.readFileSync(source));
+    console.log('targetFile: ', targetFile);
+}
+
+function copyFolderRecursiveSync(source, target)
+{
+    let files = [];
+    //check if folder needs to be created or integrated
+    let targetFolder = path.join(target, path.basename(source));
+    if (!fs.existsSync(targetFolder))
+    {
+        fs.mkdirSync(targetFolder);
+    }
+    //copy
+    if (fs.lstatSync(source).isDirectory())
+    {
+        files = fs.readdirSync(source);
+        files.forEach(function (file)
+        {
+            let curSource = path.join(source, file);
+            if (fs.lstatSync(curSource).isDirectory())
+            {
+                copyFolderRecursiveSync(curSource, targetFolder);
+            } else
+            {
+                copyFileSync(curSource, targetFolder);
+            }
+        });
+    }
+}
+
+// copyFolderRecursiveSync("./@types/", "./node_modules/");
+
+function downloadTypes(downFiles)
+{
+    let filePath = path.resolve("./node_modules/@types/" + downFiles.name) + "\\";
+    console.log('filePath: ', filePath);
+    for (let file of downFiles.files)
+    {
+        console.log(downFiles.urlPath + file);
+        try
+        {
+            downLoadFile(downFiles.urlPath + file, filePath + file);
+        }
+        catch (error)
+        {
+            console.log('error: ', error);
+        }
+    }
+
+}
+
+downloadTypes({
+    name: "three",
+    urlPath: "https://gitee.com/BearCAD/DefinitelyType2/raw/master/three/",
+    files: [
+        // "index.d.ts",
+        "three-core.d.ts",
+        // "three-outlinepass.d.ts",
+        // "three-smaapass.d.ts"
+    ]
+});
+
+
+downloadTypes({
+    name: "jquery",
+    urlPath: "https://gitee.com/BearCAD/DefinitelyType2/raw/master/jquery/",
+    files: [
+        "index.d.ts"
+    ]
+});

webpack.config.ts

@@ -1,73 +0,0 @@
-const webpack = require('webpack');
-const path = require('path');
-const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
-
-function getpath(fileName)
-{
-    return path.resolve(__dirname, fileName);
-}
-
-module.exports = {
-    //项目入口
-    entry: "./src/index.ts",
-    //输出设置
-    output: {
-        filename: "cad.js",
-        path: path.resolve(__dirname, 'umd'),
-        library: {
-            // root: "cadview",
-            // amd: "cadview",
-            commonjs: "cad"
-        },
-        libraryTarget: "umd"
-    },
-    //调试工具
-    // devtool: "source-map",
-    //项目需要解析的文件拓展名称
-    resolve: {
-        extensions: [".ts", ".tsx", ".js", "json"]
-    },
-
-    externals: {
-        'three': {
-            // amd: 'three',
-            commonjs: 'three',
-            root: "THREE",
-            commonjs2: "three"
-        },
-    },
-    //模块加载器设置
-    module: {
-        loaders: [
-            { test: /\.tsx?$/, loader: "awesome-typescript-loader" },
-            { test: /\.css$/, loader: ['style-loader', 'css-loader'] },
-            { test: /\.[(jpg)|(png)|(obj)|(json)]$/, loader: "url-loader" },
-        ]
-    },
-    //插件
-    plugins: [
-        new webpack.DefinePlugin({
-            'process.env.NODE_ENV': JSON.stringify('production')
-        }),
-        new UglifyJsPlugin(
-            {
-                uglifyOptions:
-                    {
-                        compress: {
-                            warnings: false,
-                            conditionals: true,
-                            unused: true,
-                            comparisons: true,
-                            sequences: true,
-                            dead_code: true,
-                            evaluate: true,
-                            if_return: true,
-                            join_vars: true
-                        },
-                        output: {
-                            comments: false
-                        }
-                    }
-            }),
-    ]
-}