mirror of
https://github.com/tidys/cc-inspector-chrome
synced 2025-04-19 08:28:41 +00:00
改造成ts
This commit is contained in:
xuyanfeng
parent
fafe320805
commit
38c74e44d6
10777
CocosCreatorInspector/package-lock.json
generated
10777
CocosCreatorInspector/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -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-new": "webpack --config ./src/webpack.config.js --hide-modules --progress --watch"
|
||||
"build": "webpack --config ./src/webpack.config.js --progress",
|
||||
"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"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
const PluginMsg = require("./plugin-msg");
|
||||
module.exports = {
|
||||
id: "event-mgr",
|
||||
testInit(name) {
|
||||
chrome.runtime.connect({name: name})
|
||||
}
|
||||
}
|
||||
// const PluginMsg = require("./plugin-msg");
|
||||
// module.exports = {
|
||||
// id: "event-mgr",
|
||||
// testInit(name) {
|
||||
// chrome.runtime.connect({name: name})
|
||||
// }
|
||||
// }
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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>
|
||||
@ -19,7 +19,7 @@
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "app",
|
||||
name: 'app',
|
||||
data () {
|
||||
return {
|
||||
clientX: 0,
|
||||
@ -27,9 +27,9 @@
|
||||
},
|
||||
methods: {
|
||||
changePositionMouseAction (event) {
|
||||
document.addEventListener("mousemove", this._onMouseMove);
|
||||
document.addEventListener("mouseup", this._onMouseUp);
|
||||
document.addEventListener("onselectstart", this._onSelect);
|
||||
document.addEventListener('mousemove', this._onMouseMove);
|
||||
document.addEventListener('mouseup', this._onMouseUp);
|
||||
document.addEventListener('onselectstart', this._onSelect);
|
||||
},
|
||||
_onSelect () {
|
||||
return false;
|
||||
@ -37,28 +37,25 @@
|
||||
_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) {
|
||||
document.removeEventListener('mousemove', this._onMouseMove);
|
||||
document.removeEventListener("mouseup", this._onMouseUp);
|
||||
document.removeEventListener("onselectstart", this._onSelect);
|
||||
document.removeEventListener('mouseup', this._onMouseUp);
|
||||
document.removeEventListener('onselectstart', this._onSelect);
|
||||
},
|
||||
},
|
||||
props: [
|
||||
'name',
|
||||
'step',
|
||||
]
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
16
CocosCreatorInspector/src/index.less
Normal file
16
CocosCreatorInspector/src/index.less
Normal file
@ -0,0 +1,16 @@
|
||||
.layout {
|
||||
display: flex;
|
||||
|
||||
.vertical {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.horizontal {
|
||||
flex-direction: row;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.flex1 {
|
||||
flex: 1;
|
||||
}
|
||||
@ -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)
|
||||
@ -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-awesome/icons/flag'
|
||||
import 'vue-awesome/icons'
|
||||
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() {
|
||||
return {
|
||||
title: "cc-inspector",
|
||||
isShowMoneyPng: true,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this._initLongConn();
|
||||
},
|
||||
methods: {
|
||||
onBtnClickGitHub() {
|
||||
console.log("onBtnClickGitHub");
|
||||
},
|
||||
onClickOptions() {
|
||||
chrome.tabs.create({url: 'pages/options.html'})
|
||||
},
|
||||
_initLongConn() {
|
||||
if (!this.longConn) {
|
||||
console.log("[popup] 初始化长连接");
|
||||
this.longConn = chrome.runtime.connect({name: "popup"});
|
||||
this.longConn.onMessage.addListener(function (data, sender) {
|
||||
this._onLongConnMsg(data, sender);
|
||||
}.bind(this))
|
||||
}
|
||||
},
|
||||
_onLongConnMsg(data, sender) {
|
||||
console.log(this.title);
|
||||
},
|
||||
onMsgToBg() {
|
||||
// 因为webpack的原因,这种方式可能拿不到里面的function, var
|
||||
// chrome.extension.getBackgroundPage();
|
||||
|
||||
// 发送消息到background.js
|
||||
chrome.runtime.sendMessage('content msg', function (data) {
|
||||
console.log(data);
|
||||
});
|
||||
},
|
||||
onSendMsg() {
|
||||
if (this.longConn) {
|
||||
this.longConn.postMessage({send: "hello"});
|
||||
}
|
||||
},
|
||||
},
|
||||
// data() {
|
||||
// return {
|
||||
// title: "cc-inspector",
|
||||
// isShowMoneyPng: true,
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// created() {
|
||||
// this._initLongConn();
|
||||
// }
|
||||
//
|
||||
// onBtnClickGitHub() {
|
||||
// console.log("onBtnClickGitHub");
|
||||
// }
|
||||
//
|
||||
// onClickOptions() {
|
||||
// chrome.tabs.create({url: 'pages/options.html'})
|
||||
// }
|
||||
//
|
||||
// _initLongConn() {
|
||||
// if (!this.longConn) {
|
||||
// console.log("[popup] 初始化长连接");
|
||||
// this.longConn = chrome.runtime.connect({name: "popup"});
|
||||
// this.longConn.onMessage.addListener(function (data, sender) {
|
||||
// this._onLongConnMsg(data, sender);
|
||||
// }.bind(this))
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// _onLongConnMsg(data, sender) {
|
||||
// // console.log(this.title);
|
||||
// }
|
||||
//
|
||||
// onMsgToBg() {
|
||||
// // 因为webpack的原因,这种方式可能拿不到里面的function, var
|
||||
// // chrome.extension.getBackgroundPage();
|
||||
//
|
||||
// // 发送消息到background.js
|
||||
// chrome.runtime.sendMessage('content msg', function (data) {
|
||||
// console.log(data);
|
||||
// });
|
||||
// }
|
||||
//
|
||||
// onSendMsg() {
|
||||
// if (this.longConn) {
|
||||
// this.longConn.postMessage({send: "hello"});
|
||||
// //@import "../index.less";
|
||||
// //#popup{
|
||||
// // width: auto;
|
||||
// //}
|
||||
// }
|
||||
// }
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
<style scoped lang="less">
|
||||
|
||||
</style>
|
||||
|
||||
13
CocosCreatorInspector/src/shims-tsx.d.ts
vendored
Normal file
13
CocosCreatorInspector/src/shims-tsx.d.ts
vendored
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
4
CocosCreatorInspector/src/shims-vue.d.ts
vendored
Normal file
4
CocosCreatorInspector/src/shims-vue.d.ts
vendored
Normal file
@ -0,0 +1,4 @@
|
||||
declare module '*.vue' {
|
||||
import Vue from 'vue';
|
||||
export default Vue;
|
||||
}
|
||||
8
CocosCreatorInspector/src/test/index.ts
Normal file
8
CocosCreatorInspector/src/test/index.ts
Normal file
@ -0,0 +1,8 @@
|
||||
import Vue from 'vue';
|
||||
|
||||
import index from './index.vue';
|
||||
|
||||
new Vue({
|
||||
el: '#app',
|
||||
render: h => h(index)
|
||||
});
|
||||
15
CocosCreatorInspector/src/test/index.vue
Normal file
15
CocosCreatorInspector/src/test/index.vue
Normal file
@ -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>
|
||||
@ -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');
|
||||
|
||||
let ChromeManifest = require("./core/chrome-manifest");
|
||||
const VueLoaderPlugin = require('vue-loader/lib/plugin');
|
||||
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"),
|
||||
devtools: resolve("devtools"),
|
||||
devtools_panel:resolve("devtools/panel"),
|
||||
background: resolve("background"),
|
||||
test: resolve('test'),
|
||||
popup: resolve('popup'),
|
||||
devtools: resolve('devtools'),
|
||||
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("devtools", 'devtools', ['devtools']),
|
||||
htmlPage("devtools_panel", 'devtools_panel', ['devtools_panel']),
|
||||
htmlPage("options", 'options', ['options']),
|
||||
htmlPage('test', 'test', ['test']),
|
||||
htmlPage('popup', 'popup', ['popup']),
|
||||
htmlPage('devtools', 'devtools', ['devtools']),
|
||||
htmlPage('devtools_panel', 'devtools_panel', ['devtools_panel']),
|
||||
htmlPage('options', 'options', ['options']),
|
||||
htmlPage('background', 'background', ['background']),
|
||||
new ChromeManifest({
|
||||
outFile: path.join(__dirname, "build/manifest.json"),
|
||||
manifest: path.join(__dirname, "manifest.js")
|
||||
outFile: Path.join(__dirname, 'build/manifest.json'),
|
||||
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,//实时刷新
|
||||
|
||||
69
CocosCreatorInspector/tsconfig.json
Normal file
69
CocosCreatorInspector/tsconfig.json
Normal file
@ -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. */
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user