perf: 优化本地调试,支持直接进入umd.js

BoBoooooo · Oct 20, 2020 · 99af656 · 99af656
1 parent 8fe3018
commit 99af656
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 15 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -0,0 +1 @@
+lib/**
diff --git a/README.md b/README.md
@@ -82,10 +82,20 @@ export default {
 
 ### 3、本地调试
 
-npm run serve
+- npm run serve
 
 /examples/App.vue
 
+- lib包直接调试(发布插件后,npm install出来的包)
+
+需要安装`@babel/plugin-transform-modules-umd`对webpack打包生成的`umd.js`转码
+```
+npm install --save-dev @babel/plugin-transform-modules-umd
+```
+
+import plugin from '../lib/plugin.umd.js';
+import '../lib/plugin.css';
+
 ### 4、发布
 
 - 注册npm账号
@@ -100,3 +110,4 @@ npm run serve
 
 npm install bobo-npm-plugin 
 
+
diff --git a/babel.config.js b/babel.config.js
@@ -2,4 +2,5 @@ module.exports = {
   presets: [
     '@vue/app',
   ],
+  plugins: ['@babel/plugin-transform-modules-umd'],
 };
diff --git a/examples/main.ts b/examples/main.ts
@@ -1,6 +1,8 @@
 import Vue from 'vue';
 import App from './App.vue';
-// import BoBoNpmPluginTest from 'bobo-npm-plugin-test'
+// 直接引入lib进行npm install 模拟测试
+// import plugin from '../lib/plugin.umd.js';
+// import '../lib/plugin.css';
 import plugin from '../packages/index';
 
 Vue.use(plugin);

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "multifunction-crud",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "first npm test",
   "main": "lib/plugin.umd.min.js",
   "private": false,
@@ -37,32 +37,33 @@
     "vuex-persistedstate": "3.1.0"
   },
   "devDependencies": {
+    "@babel/plugin-transform-modules-umd": "^7.12.1",
+    "@typescript-eslint/eslint-plugin": "^2.26.0",
+    "@typescript-eslint/parser": "^2.26.0",
+    "@vue/cli-plugin-babel": "4.5.4",
+    "@vue/cli-plugin-eslint": "4.5.4",
+    "@vue/cli-plugin-typescript": "4.5.4",
+    "@vue/cli-plugin-unit-mocha": "4.5.4",
+    "@vue/cli-service": "^3.9.2",
+    "@vue/eslint-config-airbnb": "^4.0.1",
+    "@vue/eslint-config-typescript": "^5.0.2",
     "babel-eslint": "^10.0.2",
     "chai": "^4.2.0",
-    "husky": "^3.0.9",
     "eslint": "^6.0.1",
     "eslint-plugin-import": "^2.18.0",
     "eslint-plugin-vue": "^5.2.3",
     "html-webpack-include-assets-plugin": "^2.0.0",
+    "husky": "^3.0.9",
     "image-webpack-loader": "^6.0.0",
     "lint-staged": "^9.2.0",
     "node-sass": "^4.12.0",
     "sass-loader": "^7.1.0",
+    "typescript": "~3.8.3",
     "vue-cli-plugin-axios": "0.0.4",
     "vue-cli-plugin-element": "^1.0.1",
     "vue-template-compiler": "2.6.11",
     "webpack": "^4.35.3",
-    "typescript": "~3.8.3",
-    "webpack-bundle-analyzer": "^3.3.2",
-    "@vue/cli-plugin-babel": "4.5.4",
-    "@vue/cli-plugin-eslint": "4.5.4",
-    "@vue/cli-plugin-typescript": "4.5.4",
-    "@vue/cli-plugin-unit-mocha": "4.5.4",
-    "@vue/cli-service": "^3.9.2",
-    "@vue/eslint-config-airbnb": "^4.0.1",
-    "@vue/eslint-config-typescript": "^5.0.2",
-    "@typescript-eslint/eslint-plugin": "^2.26.0",
-    "@typescript-eslint/parser": "^2.26.0"
+    "webpack-bundle-analyzer": "^3.3.2"
   },
   "husky": {
     "hooks": {

diff --git a/packages/crud-table/src/CrudTable.vue b/packages/crud-table/src/CrudTable.vue
@@ -248,6 +248,8 @@ export default class CrudTable extends Vue {
     searchForm: HTMLFormElement;
   };
 
+  name= 'CrudTable';
+
   // 当前点击行
   currentRow: any = {};