改造成ts

CocosCreatorInspector/package.json

@@ -10,21 +10,25 @@
     "dev-index": "cross-env NODE_ENV=development webpack-dev-server --open http://localhost:8082/index.html --inline  --progress --hot --port 8082",
     "dev-popup": "cross-env NODE_ENV=development webpack-dev-server --open http://localhost:8083/popup.html --inline  --progress --hot --port 8083",
     "dev-inspector": "cross-env NODE_ENV=development webpack-dev-server --open http://localhost:8084/devInspector.html --inline --progress --hot --port 8084",
-    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
+    "build": "webpack --config ./src/webpack.config.js --progress",
-    "build-new": "webpack --config ./src/webpack.config.js --hide-modules --progress --watch"
+    "build-watch": "webpack --config ./src/webpack.config.js --hide-modules --progress --watch"
   },
   "dependencies": {
+    "@types/chrome": "0.0.133",
     "fs": "0.0.1-security",
     "fs-extra": "^5.0.0",
     "gulp": "^3.9.1",
     "gulp-shell": "^0.6.5",
     "json-beautifully": "^1.0.3",
-    "node-sass": "^4.7.2",
+    "less": "3.9.0",
+    "less-loader": "5.0.0",
     "path": "^0.12.7",
-    "sass-loader": "^6.0.6",
+    "ts-loader": "^6.2.2",
+    "typescript": "^3.9.9",
     "url-loader": "^0.6.2",
     "vue": "^2.4.4",
-    "vue-awesome": "^2.3.4"
+    "vue-awesome": "^2.3.4",
+    "vue-property-decorator": "^9.1.2"
   },
   "browserslist": [
     "> 1%",
@@ -42,11 +46,12 @@
     "css-loader": "^0.28.7",
     "element-ui": "^2.0.11",
     "file-loader": "^1.1.4",
-    "html-webpack-plugin": "^2.30.1",
+    "html-webpack-plugin": "^3.2.0",
     "style-loader": "^0.19.0",
-    "vue-loader": "^13.0.5",
+    "vue-loader": "^15.9.6",
     "vue-template-compiler": "^2.4.4",
-    "webpack": "^3.6.0",
+    "webpack": "^4.46.0",
+    "webpack-cli": "^4.6.0",
     "webpack-dev-server": "^2.9.1"
   }
 }

CocosCreatorInspector/src/core/event-mgr.js

@@ -1,7 +1,7 @@
-const PluginMsg = require("./plugin-msg");
+// const PluginMsg = require("./plugin-msg");
-module.exports = {
+// module.exports = {
-  id: "event-mgr",
+//   id: "event-mgr",
-  testInit(name) {
+//   testInit(name) {
-    chrome.runtime.connect({name: name})
+//     chrome.runtime.connect({name: name})
-  }
+//   }
-}
+// }

CocosCreatorInspector/src/devtools/panel/index.js

@@ -7,7 +7,6 @@ import ui_prop from './ui/ui-prop.vue'
 import NodeBaseProperty from './ccType/NodeBaseProperty.vue'
 import SceneProperty from './ccType/SceneProperty.vue'
 import ComponentsProperty from './ccType/ComponentsProperty'
-import ColorPicker from './ui/colorPicker'
 
 
 Vue.component('ui-prop', ui_prop);

CocosCreatorInspector/src/devtools/panel/ui/colorPicker.vue

@@ -1,229 +0,0 @@
-<template lang="html">
-  <div class="m-colorPicker" ref="colorPicker" v-on:click="event => { event.stopPropagation() }">
-    <!-- 颜色显示小方块 -->
-    <div class="colorBtn"
-      v-bind:style="`background-color: ${showColor}`"
-      v-on:click="openStatus = !disabled"
-      v-bind:class="{ disabled: disabled }"
-    ></div>
-    <!-- 用以激活HTML5颜色面板 -->
-    <input type="color"
-      ref="html5Color"
-      v-model="html5Color"
-      v-on:change="updataValue(html5Color)">
-    <!-- 颜色色盘 -->
-    <div class="box" v-bind:class="{ open: openStatus }">
-      <div class="hd">
-        <div class="colorView" v-bind:style="`background-color: ${showPanelColor}`"></div>
-        <div class="defaultColor"
-          v-on:click="handleDefaultColor"
-          v-on:mouseover="hoveColor = defaultColor"
-          v-on:mouseout="hoveColor = null"
-        >默认颜色</div>
-      </div>
-      <div class="bd">
-        <h3>主题颜色</h3>
-        <ul class="tColor">
-          <li
-            v-for="color of tColor"
-            v-bind:style="{ backgroundColor: color }"
-            v-on:mouseover="hoveColor = color"
-            v-on:mouseout="hoveColor = null"
-            v-on:click="updataValue(color)"
-          ></li>
-        </ul>
-        <ul class="bColor">
-          <li v-for="item of colorPanel">
-            <ul>
-              <li
-                v-for="color of item"
-                v-bind:style="{ backgroundColor: color }"
-                v-on:mouseover="hoveColor = color"
-                v-on:mouseout="hoveColor = null"
-                v-on:click="updataValue(color)"
-              ></li>
-            </ul>
-          </li>
-        </ul>
-        <h3>标准颜色</h3>
-        <ul class="tColor">
-          <li
-            v-for="color of bColor"
-            v-bind:style="{ backgroundColor: color }"
-            v-on:mouseover="hoveColor = color"
-            v-on:mouseout="hoveColor = null"
-            v-on:click="updataValue(color)"
-          ></li>
-        </ul>
-        <h3 v-on:click="triggerHtml5Color">更多颜色...</h3>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'colorPicker',
-  props: {
-    // 当前颜色值
-    value: {
-      type: String,
-      required: true
-    },
-    // 默认颜色
-    defaultColor: {
-      type: String,
-      default: '#000'
-    },
-    // 禁用状态
-    disabled: {
-      type: Boolean,
-      default: false
-    }
-  },
-  data () {
-    return {
-      // 面板打开状态
-      openStatus: false,
-      // 鼠标经过的颜色块
-      hoveColor: null,
-      // 主题颜色
-      tColor: ['#000', '#fff', '#eeece1', '#1e497b', '#4e81bb', '#e2534d', '#9aba60', '#8165a0', '#47acc5', '#f9974c'],
-      // 颜色面板
-      colorConfig: [
-        ['#7f7f7f', '#f2f2f2'],
-        ['#0d0d0d', '#808080'],
-        ['#1c1a10', '#ddd8c3'],
-        ['#0e243d', '#c6d9f0'],
-        ['#233f5e', '#dae5f0'],
-        ['#632623', '#f2dbdb'],
-        ['#4d602c', '#eaf1de'],
-        ['#3f3150', '#e6e0ec'],
-        ['#1e5867', '#d9eef3'],
-        ['#99490f', '#fee9da']
-      ],
-      // 标准颜色
-      bColor: ['#c21401', '#ff1e02', '#ffc12a', '#ffff3a', '#90cf5b', '#00af57', '#00afee', '#0071be', '#00215f', '#72349d'],
-      html5Color: this.value
-    }
-  },
-  computed: {
-    // 显示面板颜色
-    showPanelColor () {
-      if (this.hoveColor) {
-        return this.hoveColor
-      } else {
-        return this.showColor
-      }
-    },
-    // 显示颜色
-    showColor () {
-      if (this.value) {
-        return this.value
-      } else {
-        return this.defaultColor
-      }
-    },
-    // 颜色面板
-    colorPanel () {
-      let colorArr = []
-      for (let color of this.colorConfig) {
-        colorArr.push(this.gradient(color[1], color[0], 5))
-      }
-      return colorArr
-    }
-  },
-  methods: {
-    triggerHtml5Color () {
-      this.$refs.html5Color.click()
-    },
-    // 更新组件的值 value
-    updataValue (value) {
-      this.$emit('input', value)
-      this.$emit('change', value)
-      this.openStatus = false
-    },
-    // 设置默认颜色
-    handleDefaultColor () {
-      this.updataValue(this.defaultColor)
-    },
-    // 格式化 hex 颜色值
-    parseColor (hexStr) {
-      if (hexStr.length === 4) {
-        hexStr = '#' + hexStr[1] + hexStr[1] + hexStr[2] + hexStr[2] + hexStr[3] + hexStr[3]
-      } else {
-        return hexStr
-      }
-    },
-    // RGB 颜色 转 HEX 颜色
-    rgbToHex (r, g, b) {
-      let hex = ((r << 16) | (g << 8) | b).toString(16)
-      return '#' + new Array(Math.abs(hex.length - 7)).join('0') + hex
-    },
-    // HEX 转 RGB 颜色
-    hexToRgb (hex) {
-      hex = this.parseColor(hex)
-      let rgb = []
-      for (let i = 1; i < 7; i += 2) {
-        rgb.push(parseInt('0x' + hex.slice(i, i + 2)))
-      }
-      return rgb
-    },
-    // 计算渐变过渡颜色
-    gradient (startColor, endColor, step) {
-      // 讲 hex 转换为 rgb
-      let sColor = this.hexToRgb(startColor)
-      let eColor = this.hexToRgb(endColor)
-
-      // 计算R\G\B每一步的差值
-      let rStep = (eColor[0] - sColor[0]) / step
-      let gStep = (eColor[1] - sColor[1]) / step
-      let bStep = (eColor[2] - sColor[2]) / step
-
-      let gradientColorArr = []
-      // 计算每一步的hex值
-      for (let i = 0; i < step; i++) {
-        gradientColorArr.push(this.rgbToHex(parseInt(rStep * i + sColor[0]), parseInt(gStep * i + sColor[1]), parseInt(bStep * i + sColor[2])))
-      }
-      return gradientColorArr
-    }
-  },
-  mounted () {
-    // 点击页面上其他地方，关闭弹窗
-    document.onclick = (e) => {
-      this.openStatus = false
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.m-colorPicker{
-  position: relative; text-align: left; font-size: 14px; display: inline-block;
-  ul,li,ol{ list-style: none; margin: 0; padding: 0; }
-  input{ display: none; }
-  .colorBtn{ width: 15px; height: 15px; }
-  .colorBtn.disabled{ cursor: no-drop; }
-  .box{
-    position: absolute; width: 190px; background: #fff; border: 1px solid #ddd; visibility: hidden; border-radius: 2px; margin-top: 2px; padding: 10px; padding-bottom: 5px; box-shadow: 0 0 5px rgba(0,0,0,.15); opacity: 0; transition: all .3s ease;
-    h3{ margin: 0; font-size: 14px; font-weight: normal; margin-top: 10px; margin-bottom: 5px; line-height: 1; }
-  }
-  .box.open{ visibility: visible; opacity: 1; }
-  .hd{
-    overflow: hidden; line-height: 29px;
-    .colorView{ width: 100px; height: 30px; float: left; transition: background-color .3s ease; }
-    .defaultColor{ width: 80px; float: right; text-align: center; border: 1px solid #ddd; cursor: pointer; }
-  }
-  .tColor{
-    li{ width: 15px; height: 15px; display: inline-block; margin: 0 2px; transition: all .3s ease; }
-    li:hover{ box-shadow: 0 0 5px rgba(0,0,0,.4); transform: scale(1.3); }
-  }
-  .bColor{
-    li{
-      width: 15px; display: inline-block; margin: 0 2px;
-      li{ display: block; width: 15px; height: 15px; transition: all .3s ease; margin: 0; }
-      li:hover{ box-shadow: 0 0 5px rgba(0,0,0,.4); transform: scale(1.3); }
-    }
-  }
-}
-</style>

CocosCreatorInspector/src/devtools/panel/ui/ui-prop.vue

@@ -6,7 +6,7 @@
          class="noselect">
       <span onselectstart="return false;" class="noselect font"
             style="line-height: 30px;color: #bdbdbd;font-size: 12px;margin: 3px;">
-        {{name}}
+        {{ name }}
       </span>
     </div>
     <div style=" float:left;background-color: #4a4a4a;width: 80%;height:100%;text-align: left;">
@@ -18,55 +18,52 @@
 </template>
 
 <script>
-  export default {
+export default {
-    name: "app",
+  name: 'app',
-    data() {
+  data () {
     return {
       clientX: 0,
     };
   },
   methods: {
-      changePositionMouseAction(event) {
+    changePositionMouseAction (event) {
-        document.addEventListener("mousemove", this._onMouseMove);
+      document.addEventListener('mousemove', this._onMouseMove);
-        document.addEventListener("mouseup", this._onMouseUp);
+      document.addEventListener('mouseup', this._onMouseUp);
-        document.addEventListener("onselectstart", this._onSelect);
+      document.addEventListener('onselectstart', this._onSelect);
     },
-      _onSelect() {
+    _onSelect () {
       return false;
     },
-      _onMouseMove(event) {
+    _onMouseMove (event) {
       let x = event.clientX;
       let calcStep = parseFloat(this.step) || 1;// 默认值为1
-        // console.log("curentX: " + x);
-        // console.log("clientX: " + this.clientX);
       if (x > this.clientX) {
         calcStep = Math.abs(calcStep);
       } else {
         calcStep = -Math.abs(calcStep);
       }
-        // console.log(calcStep);
+      this.$emit('movestep', calcStep);
-        this.$emit("movestep", calcStep);
       this.clientX = x;
     },
-      _onMouseUp(event) {
+    _onMouseUp (event) {
       document.removeEventListener('mousemove', this._onMouseMove);
-        document.removeEventListener("mouseup", this._onMouseUp);
+      document.removeEventListener('mouseup', this._onMouseUp);
-        document.removeEventListener("onselectstart", this._onSelect);
+      document.removeEventListener('onselectstart', this._onSelect);
     },
   },
   props: [
     'name',
     'step',
   ]
-  }
+};
 </script>
 
 <style scoped>
-  .font {
+.font {
   font-family: BlinkMacSystemFont, 'Helvetica Neue', Helvetica, 'Lucida Grande', 'Segoe UI', Ubuntu, Cantarell, 'SourceHanSansCN-Normal', Arial, sans-serif
-  }
+}
 
-  .noselect {
+.noselect {
   -webkit-touch-callout: none; /* iOS Safari */
   -webkit-user-select: none; /* Chrome/Safari/Opera */
   -khtml-user-select: none; /* Konqueror */
@@ -75,5 +72,5 @@
   user-select: none;
   /* Non-prefixed version, currently
  not supported by any browser */
-  }
+}
 </style>

CocosCreatorInspector/src/index.less

@@ -0,0 +1,16 @@
+.layout {
+  display: flex;
+
+  .vertical {
+    flex-direction: column;
+  }
+
+  .horizontal {
+    flex-direction: row;
+
+  }
+}
+
+.flex1 {
+  flex: 1;
+}

CocosCreatorInspector/src/popup/index.ts

@@ -1,10 +1,10 @@
 import Vue from 'vue';
-import index from './index.vue';
 
 import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'
 Vue.use(ElementUI);
 
+import index from './index.vue';
 new Vue({
   el: '#app',
   render: h => h(index)

CocosCreatorInspector/src/popup/index.vue

@@ -1,7 +1,7 @@
 <template>
-  <div style="width: auto;">
+  <div id="popup">
     <div style="display: flex;flex-direction: row;align-items: center;">
-      <h3>{{title}}</h3>
+      <h3 v-show="false"> title </h3>
       <div style="flex: 1"></div>
       <el-button size="mini" @click="onClickOptions">设置</el-button>
       <el-button size="mini" @click="onMsgToBg">To-Bg</el-button>
@@ -21,79 +21,97 @@
       <span style="font-size: 14px;float: left;text-align: center;line-height: 30px;color: #6d6d6d;">联系方式:</span>
       <div style="height: 100%;float: right;margin-right: 10px;">
         <a href="https://github.com/tidys/CocosCreatorPlugins/tree/master/CocosCreatorInspector" target="_blank">
-          <img src="./res/github.png" style="height: 100%;">
+          <img v-show="false" src="./res/github.png" style="height: 100%;">
         </a>
       </div>
       <div style="height: 100%;float: right;margin-right: 10px;">
         <a href="https://jq.qq.com/?_wv=1027&k=5SdPdy2" target="_blank">
-          <img src="./res/qq.png" style="height: 100%;">
+          <img v-show="false" src="./res/qq.png" style="height: 100%;">
         </a>
       </div>
       <div style="height: 100%;float: right;margin-right: 10px;">
         <a href="http://forum.cocos.com/t/chrome-creator/55669" target="_blank">
-          <img src="./res/tiezi.png" style="height: 100%;">
+          <img v-show="false" src="./res/tiezi.png" style="height: 100%;">
         </a>
       </div>
     </div>
   </div>
 </template>
 
-<script>
+<script lang="ts">
-  import Vue from 'vue'
+import Vue from 'vue'
-  import 'vue-awesome/icons/flag'
+import 'vue-awesome/icons/flag'
-  import 'vue-awesome/icons'
+import 'vue-awesome/icons'
-  import Icon from 'vue-awesome/components/Icon'
+import Icon from 'vue-awesome/components/Icon'
+import {Component} from 'vue-property-decorator'
+import chrome from 'chrome'
+import {Button} from 'element-ui'
 
-  Vue.component('icon', Icon);
+@Component({
+  components: {
+    Icon,
+    Button,
+  }
+})
+export default class Index extends Vue {
+  longConn: chrome.runtime.Port = false
 
-  export default {
+  // data() {
-    data() {
+  //   return {
-      return {
+  //     title: "cc-inspector",
-        title: "cc-inspector",
+  //     isShowMoneyPng: true,
-        isShowMoneyPng: true,
+  //   }
-      }
+  // }
-    },
+  //
-    created() {
+  // created() {
-      this._initLongConn();
+  //   this._initLongConn();
-    },
+  // }
-    methods: {
+  //
-      onBtnClickGitHub() {
+  // onBtnClickGitHub() {
-        console.log("onBtnClickGitHub");
+  //   console.log("onBtnClickGitHub");
-      },
+  // }
-      onClickOptions() {
+  //
-        chrome.tabs.create({url: 'pages/options.html'})
+  // onClickOptions() {
-      },
+  //   chrome.tabs.create({url: 'pages/options.html'})
-      _initLongConn() {
+  // }
-        if (!this.longConn) {
+  //
-          console.log("[popup] 初始化长连接");
+  // _initLongConn() {
-          this.longConn = chrome.runtime.connect({name: "popup"});
+  //   if (!this.longConn) {
-          this.longConn.onMessage.addListener(function (data, sender) {
+  //     console.log("[popup] 初始化长连接");
-            this._onLongConnMsg(data, sender);
+  //     this.longConn = chrome.runtime.connect({name: "popup"});
-          }.bind(this))
+  //     this.longConn.onMessage.addListener(function (data, sender) {
-        }
+  //       this._onLongConnMsg(data, sender);
-      },
+  //     }.bind(this))
-      _onLongConnMsg(data, sender) {
+  //   }
-        console.log(this.title);
+  // }
-      },
+  //
-      onMsgToBg() {
+  // _onLongConnMsg(data, sender) {
-        // 因为webpack的原因,这种方式可能拿不到里面的function, var
+  //   // console.log(this.title);
-        // chrome.extension.getBackgroundPage();
+  // }
-
+  //
-        // 发送消息到background.js
+  // onMsgToBg() {
-        chrome.runtime.sendMessage('content msg', function (data) {
+  //   // 因为webpack的原因,这种方式可能拿不到里面的function, var
-          console.log(data);
+  //   // chrome.extension.getBackgroundPage();
-        });
+  //
-      },
+  //   // 发送消息到background.js
-      onSendMsg() {
+  //   chrome.runtime.sendMessage('content msg', function (data) {
-        if (this.longConn) {
+  //     console.log(data);
-          this.longConn.postMessage({send: "hello"});
+  //   });
-        }
+  // }
-      },
+  //
-    },
+  // onSendMsg() {
-  }
+  //   if (this.longConn) {
+  //     this.longConn.postMessage({send: "hello"});
+  //     //@import "../index.less";
+  //     //#popup{
+  //     //  width: auto;
+  //     //}
+  //   }
+  // }
+}
 </script>
 
 
-<style scoped>
+<style scoped lang="less">
 
 </style>

CocosCreatorInspector/src/shims-tsx.d.ts

@@ -0,0 +1,13 @@
+import Vue, { VNode } from 'vue';
+
+declare global {
+  namespace JSX {
+    // tslint:disable no-empty-interface
+    interface Element extends VNode {}
+    // tslint:disable no-empty-interface
+    interface ElementClass extends Vue {}
+    interface IntrinsicElements {
+      [elem: string]: any;
+    }
+  }
+}

CocosCreatorInspector/src/shims-vue.d.ts

@@ -0,0 +1,4 @@
+declare module '*.vue' {
+  import Vue from 'vue';
+  export default Vue;
+}

CocosCreatorInspector/src/test/index.ts

@@ -0,0 +1,8 @@
+import Vue from 'vue';
+
+import index from './index.vue';
+
+new Vue({
+  el: '#app',
+  render: h => h(index)
+});

CocosCreatorInspector/src/test/index.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+    111
+  </div>
+</template>
+<script lang="ts">
+import Vue from 'vue'
+
+export default class index extends Vue {
+  name: string = 'test-index'
+}
+</script>
+<style>
+
+</style>

CocosCreatorInspector/src/webpack.config.js

@@ -1,18 +1,18 @@
-let path = require('path');
+const Path = require('path');
 let webpack = require('webpack');
 let HtmlWebpackPlugin = require('html-webpack-plugin');
 let CleanWebpackPlugin = require('clean-webpack-plugin');
 let CopyWebpackPlugin = require('copy-webpack-plugin');
-
+const VueLoaderPlugin = require('vue-loader/lib/plugin');
-let ChromeManifest = require("./core/chrome-manifest");
+let ChromeManifest = require('./core/chrome-manifest');
 
 if (process.env.NODE_ENV === 'production') {
 
 }
 
 let resolve = function (dir) {
-  return path.join(__dirname, dir);
+  return Path.join(__dirname, dir);
-}
+};
 
 let htmlPage = function (title, filename, chunks, template) {
   return new HtmlWebpackPlugin({
@@ -21,20 +21,22 @@ let htmlPage = function (title, filename, chunks, template) {
     cache: true,
     inject: 'body',
     filename: './pages/' + filename + '.html',
-    template: template || path.resolve(__dirname, 'core/page.ejs'),
+    template: template || Path.resolve(__dirname, 'core/page.ejs'),
     appMountId: 'app',
     chunks
   });
-}
+};
 
 module.exports = {
+  mode: 'development',
   entry: {
-    popup: resolve("popup"),
+    test: resolve('test'),
-    devtools: resolve("devtools"),
+    popup: resolve('popup'),
-    devtools_panel:resolve("devtools/panel"),
+    devtools: resolve('devtools'),
-    background: resolve("background"),
+    devtools_panel: resolve('devtools/panel'),
+    background: resolve('background'),
     options: resolve('options'),
-    content: resolve("content"),
+    content: resolve('content'),
     inject: resolve('content/inject'),
 
     // devInspector: path.resolve(__dirname, './src/dev/devInspector/main.js'),
@@ -46,11 +48,12 @@ module.exports = {
     // injectScript: path.resolve(__dirname, './src/dev/injectScript.js'),
   },
   output: {
-    path: path.resolve(__dirname, 'build'),
+    path: Path.resolve(__dirname, 'build'),
     publicPath: '/',
     filename: 'js/[name].js'
   },
   plugins: [
+    new VueLoaderPlugin(),
     // new webpack.HotModuleReplacementPlugin(),
     // webpack 执行之前删除dist下的文件
     new CleanWebpackPlugin(['./build/*'], {
@@ -59,14 +62,15 @@ module.exports = {
       dry: false,//启用删除文件
     }),
 
-    htmlPage("popup", 'popup', ['popup']),
+    htmlPage('test', 'test', ['test']),
-    htmlPage("devtools", 'devtools', ['devtools']),
+    htmlPage('popup', 'popup', ['popup']),
-    htmlPage("devtools_panel", 'devtools_panel', ['devtools_panel']),
+    htmlPage('devtools', 'devtools', ['devtools']),
-    htmlPage("options", 'options', ['options']),
+    htmlPage('devtools_panel', 'devtools_panel', ['devtools_panel']),
+    htmlPage('options', 'options', ['options']),
     htmlPage('background', 'background', ['background']),
     new ChromeManifest({
-      outFile: path.join(__dirname, "build/manifest.json"),
+      outFile: Path.join(__dirname, 'build/manifest.json'),
-      manifest: path.join(__dirname, "manifest.js")
+      manifest: Path.join(__dirname, 'manifest.js')
     }),
     //index.html
     // new HtmlWebpackPlugin({
@@ -95,7 +99,7 @@ module.exports = {
 
     // 拷贝静态资源(manifest.json)
     new CopyWebpackPlugin([{
-      from: path.resolve(__dirname, 'icon'),
+      from: Path.resolve(__dirname, 'icon'),
       to: 'icon',
       force: true,
       // ignore: ['.*']
@@ -118,12 +122,18 @@ module.exports = {
   module: {
     rules: [
       {
-        test: /\.(less|css)$/,
+        test: /\.(css)$/,
         use: [
           'vue-style-loader',
           'css-loader'
         ],
       },
+      {
+        test: /\.less$/,
+        use: [
+          'less-loader'
+        ],
+      },
       {
         test: /\.vue$/,
         loader: 'vue-loader',
@@ -131,6 +141,7 @@ module.exports = {
           loaders: {
             scss: 'style-loader!css-loader!sass-loader',
             sass: 'style-loader!css-loader!sass-loader?indentedSyntax',
+            less: 'less-loader'
           }
           // other vue-loader options go here
         }
@@ -140,6 +151,11 @@ module.exports = {
         loader: 'babel-loader',
         exclude: /node_modules/
       },
+      {
+        test: /\.ts$/,
+        loader: 'ts-loader',
+        exclude: /node_modules/
+      },
       // {
       //   test: /\.(png|jpg|gif|svg|ttf|woff|woff2|eot)$/,
       //   loader: 'file-loader',
@@ -169,10 +185,10 @@ module.exports = {
     alias: {
       'vue$': 'vue/dist/vue.esm.js'
     },
-    extensions: ['*', '.js', '.vue', '.json']
+    extensions: ['*', '.js', '.vue', '.json', '.ts', '.tsx']
   },
   devServer: {
-    contentBase: "./dist",//本地服务器所加载的页面所在的目录
+    contentBase: './dist',//本地服务器所加载的页面所在的目录
     historyApiFallback: true,//不跳转
     noInfo: true,
     inline: true,//实时刷新

CocosCreatorInspector/tsconfig.json

@@ -0,0 +1,69 @@
+{
+  "compilerOptions": {
+    /* Visit https://aka.ms/tsconfig.json to read more about this file */
+
+    /* Basic Options */
+    // "incremental": true,                   /* Enable incremental compilation */
+    "target": "es5",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
+    "module": "commonjs",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
+    // "lib": [],                             /* Specify library files to be included in the compilation. */
+    // "allowJs": true,                       /* Allow javascript files to be compiled. */
+    // "checkJs": true,                       /* Report errors in .js files. */
+    // "jsx": "preserve",                     /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
+    // "declaration": true,                   /* Generates corresponding '.d.ts' file. */
+    // "declarationMap": true,                /* Generates a sourcemap for each corresponding '.d.ts' file. */
+    // "sourceMap": true,                     /* Generates corresponding '.map' file. */
+    // "outFile": "./",                       /* Concatenate and emit output to single file. */
+    // "outDir": "./",                        /* Redirect output structure to the directory. */
+    // "rootDir": "./",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
+    // "composite": true,                     /* Enable project compilation */
+    // "tsBuildInfoFile": "./",               /* Specify file to store incremental compilation information */
+    // "removeComments": true,                /* Do not emit comments to output. */
+    // "noEmit": true,                        /* Do not emit outputs. */
+    // "importHelpers": true,                 /* Import emit helpers from 'tslib'. */
+    // "downlevelIteration": true,            /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
+    // "isolatedModules": true,               /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
+
+    /* Strict Type-Checking Options */
+    "strict": true,                           /* Enable all strict type-checking options. */
+    // "noImplicitAny": true,                 /* Raise error on expressions and declarations with an implied 'any' type. */
+    // "strictNullChecks": true,              /* Enable strict null checks. */
+    // "strictFunctionTypes": true,           /* Enable strict checking of function types. */
+    // "strictBindCallApply": true,           /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
+    // "strictPropertyInitialization": true,  /* Enable strict checking of property initialization in classes. */
+    // "noImplicitThis": true,                /* Raise error on 'this' expressions with an implied 'any' type. */
+    // "alwaysStrict": true,                  /* Parse in strict mode and emit "use strict" for each source file. */
+
+    /* Additional Checks */
+    // "noUnusedLocals": true,                /* Report errors on unused locals. */
+    // "noUnusedParameters": true,            /* Report errors on unused parameters. */
+    // "noImplicitReturns": true,             /* Report error when not all code paths in function return a value. */
+    // "noFallthroughCasesInSwitch": true,    /* Report errors for fallthrough cases in switch statement. */
+
+    /* Module Resolution Options */
+    // "moduleResolution": "node",            /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
+    // "baseUrl": "./",                       /* Base directory to resolve non-absolute module names. */
+    // "paths": {},                           /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
+    // "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */
+    // "typeRoots": [],                       /* List of folders to include type definitions from. */
+    // "types": [],                           /* Type declaration files to be included in compilation. */
+    // "allowSyntheticDefaultImports": true,  /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
+    "esModuleInterop": true,                  /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
+    // "preserveSymlinks": true,              /* Do not resolve the real path of symlinks. */
+    // "allowUmdGlobalAccess": true,          /* Allow accessing UMD globals from modules. */
+
+    /* Source Map Options */
+    // "sourceRoot": "",                      /* Specify the location where debugger should locate TypeScript files instead of source locations. */
+    // "mapRoot": "",                         /* Specify the location where debugger should locate map files instead of generated locations. */
+    // "inlineSourceMap": true,               /* Emit a single file with source maps instead of having a separate file. */
+    // "inlineSources": true,                 /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
+
+    /* Experimental Options */
+    // "experimentalDecorators": true,        /* Enables experimental support for ES7 decorators. */
+    // "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */
+
+    /* Advanced Options */
+    "skipLibCheck": true,                     /* Skip type checking of declaration files. */
+    "forceConsistentCasingInFileNames": true  /* Disallow inconsistently-cased references to the same file. */
+  }
+}