调整打包依赖

dependencies-cdn.js

@@ -1,13 +1,13 @@
 module.exports = [
   { name: 'vue', library: 'Vue', js: 'https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js', css: '' },
   { name: 'axios', library: 'axios', js: 'https://cdn.jsdelivr.net/npm/axios@0.19.2/dist/axios.min.js', css: '' },
-  { name: 'brace', library: 'ace', js: 'https://cdn.jsdelivr.net/npm/brace@0.11.1/index.min.js', css: '' },
+  // { name: 'brace', library: 'ace', js: 'https://cdn.jsdelivr.net/npm/brace@0.11.1/index.min.js', css: '' },
-  { name: 'brace/ext/language_tools', library: 'language_tools', js: ' https://cdn.jsdelivr.net/npm/brace@0.11.1/ext/language_tools.js', css: '' },
+  // { name: 'brace/ext/language_tools', library: 'language_tools', js: ' https://cdn.jsdelivr.net/npm/brace@0.11.1/ext/language_tools.js', css: '' },
-  { name: 'brace/mode/html', library: 'html', js: ' https://cdn.jsdelivr.net/npm/brace@0.11.1/mode/html.js', css: '' },
+  // { name: 'brace/mode/html', library: 'html', js: ' https://cdn.jsdelivr.net/npm/brace@0.11.1/mode/html.js', css: '' },
-  { name: 'brace/mode/javascript', library: 'javascript', js: ' https://cdn.jsdelivr.net/npm/brace@0.11.1/mode/javascript.js', css: '' },
+  // { name: 'brace/mode/javascript', library: 'javascript', js: ' https://cdn.jsdelivr.net/npm/brace@0.11.1/mode/javascript.js', css: '' },
-  { name: 'brace/mode/less', library: 'less', js: ' https://cdn.jsdelivr.net/npm/brace@0.11.1/mode/less.js', css: '' },
+  // { name: 'brace/mode/less', library: 'less', js: ' https://cdn.jsdelivr.net/npm/brace@0.11.1/mode/less.js', css: '' },
-  { name: 'brace/theme/chrome', library: 'chrome', js: ' https://cdn.jsdelivr.net/npm/brace@0.11.1/theme/chrome.js', css: '' },
+  // { name: 'brace/theme/chrome', library: 'chrome', js: ' https://cdn.jsdelivr.net/npm/brace@0.11.1/theme/chrome.js', css: '' },
-  { name: 'brace/snippets/javascript', library: 'javascript', js: ' https://cdn.jsdelivr.net/npm/brace@0.11.1/snippets/javascript.js', css: '' },
+  // { name: 'brace/snippets/javascript', library: 'javascript', js: ' https://cdn.jsdelivr.net/npm/brace@0.11.1/snippets/javascript.js', css: '' },
   // { name: 'vue2-ace-editor', library: 'Vue2ACEEditor', js: 'https://cdn.jsdelivr.net/npm/vue2-ace-editor@0.0.15/index.min.js', css: '' },
   { name: 'markdown-it', library: 'markdownit', js: 'https://cdn.jsdelivr.net/npm/markdown-it@10.0.0/dist/markdown-it.min.js', css: '' },
 ]

package-lock.json

@@ -4253,7 +4253,7 @@
     },
     "ejs": {
       "version": "2.7.4",
-      "resolved": "https://registry.npm.taobao.org/ejs/download/ejs-2.7.4.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fejs%2Fdownload%2Fejs-2.7.4.tgz",
+      "resolved": "https://registry.npm.taobao.org/ejs/download/ejs-2.7.4.tgz?cache=0&sync_timestamp=1585506989655&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fejs%2Fdownload%2Fejs-2.7.4.tgz",
       "integrity": "sha1-SGYSh1c9zFPjZsehrlLDoSDuybo=",
       "dev": true
     },
@@ -5170,6 +5170,12 @@
         "readable-stream": "^2.0.0"
       }
     },
+    "fs": {
+      "version": "0.0.1-security",
+      "resolved": "https://registry.npm.taobao.org/fs/download/fs-0.0.1-security.tgz",
+      "integrity": "sha1-invTcYa23d84E/I4WLV+yq9eQdQ=",
+      "dev": true
+    },
     "fs-extra": {
       "version": "7.0.1",
       "resolved": "https://registry.npm.taobao.org/fs-extra/download/fs-extra-7.0.1.tgz",
@@ -11934,7 +11940,7 @@
     },
     "webpack-bundle-analyzer": {
       "version": "3.7.0",
-      "resolved": "https://registry.npm.taobao.org/webpack-bundle-analyzer/download/webpack-bundle-analyzer-3.7.0.tgz?cache=0&sync_timestamp=1586846559504&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fwebpack-bundle-analyzer%2Fdownload%2Fwebpack-bundle-analyzer-3.7.0.tgz",
+      "resolved": "https://registry.npm.taobao.org/webpack-bundle-analyzer/download/webpack-bundle-analyzer-3.7.0.tgz?cache=0&sync_timestamp=1586846510646&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fwebpack-bundle-analyzer%2Fdownload%2Fwebpack-bundle-analyzer-3.7.0.tgz",
       "integrity": "sha1-hNpDTolEKJm4hNmtOORm0NsCpW8=",
       "dev": true,
       "requires": {

package.json

@@ -26,6 +26,7 @@
     "babel-eslint": "^10.1.0",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^6.2.2",
+    "fs": "0.0.1-security",
     "vue-template-compiler": "^2.6.11",
     "webpack-bundle-analyzer": "^3.7.0"
   },

public/app.js

@@ -12,10 +12,10 @@ var scripts = [
     'https://cdn.jsdelivr.net/npm/brace@0.11.1/mode/less.js',
     'https://cdn.jsdelivr.net/npm/brace@0.11.1/theme/chrome.js',
     'https://cdn.jsdelivr.net/npm/brace@0.11.1/snippets/javascript.js',
-    'https://cdn.jsdelivr.net/npm/vue2-ace-editor@0.0.15/index.min.js',
     'https://cdn.jsdelivr.net/npm/markdown-it@10.0.0/dist/markdown-it.min.js',
-    'https://cloud.jsonpop.cn/go2index/dist/test/chunk-vendors.3ecd550f.js',
+    'https://cloud.jsonpop.cn/go2index/dist/test/chunk-vendors.fefb89d7.js',
-    'https://cloud.jsonpop.cn/go2index/dist/test/app.066f1c02.js'
+    'https://cloud.jsonpop.cn/go2index/dist/test/chunk-1de57003.56998a8f.js',
+    'https://cloud.jsonpop.cn/go2index/dist/test/app.7e7fe63d.js'
 ]
 
 styles.forEach(item => {

public/nginx.conf

@@ -1,13 +1,14 @@
 server {
     listen       8082;
     server_name  localhost;
+    root   /Users/momik/Documents/MyWork/OpenSource/go2index-theme-acrou/dist;
 
     location /0: {
         proxy_pass https://ossdev.achirou.workers.dev;
     }
 
-    location / {
+    # location / {
-        root   /Users/jieshi/Desktop/MyWork/VueWork/go2index-theme-acrou/dist;
+    #     root   /Users/momik/Documents/MyWork/OpenSource/go2index-theme-acrou/dist;
-        index  index.html index.htm;
+    #     index  index.html index.htm;
-    }
+    # }
 }

src/components/ace-editor/index.js

@@ -0,0 +1,93 @@
+var ace = require('brace');
+
+module.exports = {
+    render: function (h) {
+        var height = this.height ? this.px(this.height) : '100%'
+        var width = this.width ? this.px(this.width) : '100%'
+        return h('div',{
+            attrs: {
+                style: "height: " + height  + '; width: ' + width,
+            }
+        })
+    },
+    props:{
+        value:String,
+        lang:true,
+        theme:String,
+        height:true,
+        width:true,
+        options:Object
+    },
+    data: function () {
+        return {
+            editor:null,
+            contentBackup:""
+        }
+    },
+    methods: {
+        px:function (n) {
+            if( /^\d*$/.test(n) ){
+                return n+"px";
+            }
+            return n;
+        }
+    },
+    watch:{
+        value:function (val) {
+            if(this.contentBackup !== val){
+                this.editor.session.setValue(val,1);
+                this.contentBackup = val;
+            }
+        },
+        theme:function (newTheme) {
+            this.editor.setTheme('ace/theme/'+newTheme);
+        },
+        lang:function (newLang) {
+            this.editor.getSession().setMode(typeof newLang === 'string' ? ( 'ace/mode/' + newLang ) : newLang);
+        },
+        options:function(newOption){
+            this.editor.setOptions(newOption);
+        },
+        height:function(){
+            this.$nextTick(function(){
+                this.editor.resize()
+            })
+        },
+        width:function(){
+            this.$nextTick(function(){
+                this.editor.resize()
+            })
+        }
+    },
+    beforeDestroy: function() {
+        this.editor.destroy();
+        this.editor.container.remove();
+    },
+    mounted: function () {
+        var vm = this;
+        var lang = this.lang||'text';
+        var theme = this.theme||'chrome';
+
+        require('brace/ext/emmet');
+
+        var editor = vm.editor = ace.edit(this.$el);
+        editor.$blockScrolling = Infinity;
+
+        this.$emit('init',editor);
+        
+        //editor.setOption("enableEmmet", true);
+        editor.getSession().setMode(typeof lang === 'string' ? ( 'ace/mode/' + lang ) : lang);
+        editor.setTheme('ace/theme/'+theme);
+        if(this.value)
+            editor.setValue(this.value,1);
+        this.contentBackup = this.value;
+
+        editor.on('change',function () {
+            var content = editor.getValue();
+            vm.$emit('input',content);
+            vm.contentBackup = content;
+        });
+        if(vm.options)
+            editor.setOptions(vm.options);
+    }
+}

src/view/page/GoText.vue

@@ -35,18 +35,18 @@ export default {
     };
   },
   components: {
-    editor: () => import('vue2-ace-editor'),
+    editor: import('@/components/ace-editor'),
   },
   methods: {
     editorInit (editor) {
       editor.setFontSize(18)
       editor.session.setUseWrapMode(false);
-      () => import("brace/ext/language_tools"); //language extension prerequsite...
+      import("brace/ext/language_tools"); //language extension prerequsite...
-      () => import("brace/mode/html");
+      import("brace/mode/html");
-      () => import("brace/mode/javascript"); //language
+      import("brace/mode/javascript"); //language
-      () => import("brace/mode/less");
+      import("brace/mode/less");
-      () => import("brace/theme/chrome");
+      import("brace/theme/chrome");
-      () => import("brace/snippets/javascript"); //snippet
+      import("brace/snippets/javascript"); //snippet
     },
   }
 }

vue.config.js

@@ -1,4 +1,5 @@
 const path = require("path");
+const fs = require('fs')
 const cdnDependencies = require('./dependencies-cdn')
 
 function resolve(dir) {
@@ -24,6 +25,136 @@ module.exports = {
     const configNew = {}
     if (process.env.NODE_ENV === 'production') {
       configNew.externals = externals
+      config.plugins.push({
+        apply: (compiler) => {
+          compiler.hooks.done.tap('JSWebpackPluginHooks', compilation => {
+            // console.log(compilation.assetsInfo)
+            const chunkOnlyConfig = {
+              assets: false,
+              cached: false,
+              children: false,
+              chunks: true,
+              chunkModules: false,
+              chunkOrigins: false,
+              errorDetails: false,
+              hash: false,
+              modules: false,
+              reasons: false,
+              source: false,
+              timings: false,
+              version: false
+            };
+            const allChunks = compilation.toJson(chunkOnlyConfig).chunks;
+            // console.log(JSON.stringify(allChunks))
+            let chunks = filterChunks(allChunks, 'all', []);
+            const assets = htmlWebpackPluginAssets(compilation, chunks);
+            function filterChunks (chunks, includedChunks, excludedChunks) {
+              return chunks.filter(chunk => {
+                const chunkName = chunk.names[0];
+                // This chunk doesn't have a name. This script can't handled it.
+                if (chunkName === undefined) {
+                  return false;
+                }
+                // Skip if the chunk should be lazy loaded
+                if (typeof chunk.isInitial === 'function') {
+                  if (!chunk.isInitial()) {
+                    return false;
+                  }
+                } else if (!chunk.initial) {
+                  return false;
+                }
+                // Skip if the chunks should be filtered and the given chunk was not added explicity
+                if (Array.isArray(includedChunks) && includedChunks.indexOf(chunkName) === -1) {
+                  return false;
+                }
+                // Skip if the chunks should be filtered and the given chunk was excluded explicity
+                if (Array.isArray(excludedChunks) && excludedChunks.indexOf(chunkName) !== -1) {
+                  return false;
+                }
+                // Add otherwise
+                return true;
+              });
+            }
+            function htmlWebpackPluginAssets (compilation, chunks) {
+              const self = this;
+              const compilationHash = compilation.hash;
+          
+              // Use the configured public path or build a relative path
+              let publicPath = typeof compilation.options.output.publicPath !== 'undefined'
+                // If a hard coded public path exists use it
+                ? compilation.mainTemplate.getPublicPath({hash: compilationHash})
+                // If no public path was set get a relative url path
+                : path.relative(path.resolve(compilation.options.output.path, path.dirname(self.childCompilationOutputName)), compilation.options.output.path)
+                  .split(path.sep).join('/');
+          
+              if (publicPath.length && publicPath.substr(-1, 1) !== '/') {
+                publicPath += '/';
+              }
+          
+              const assets = {
+                // The public path
+                publicPath: publicPath,
+                // Will contain all js & css files by chunk
+                chunks: {},
+                // Will contain all js files
+                js: [],
+                // Will contain all css files
+                css: [],
+                // Will contain the html5 appcache manifest files if it exists
+                manifest: Object.keys(compilation.assets).filter(assetFile => path.extname(assetFile) === '.appcache')[0]
+              };
+          
+              // Append a hash for cache busting
+              if (this.options.hash) {
+                assets.manifest = self.appendHash(assets.manifest, compilationHash);
+                assets.favicon = self.appendHash(assets.favicon, compilationHash);
+              }
+          
+              for (let i = 0; i < chunks.length; i++) {
+                const chunk = chunks[i];
+                const chunkName = chunk.names[0];
+          
+                assets.chunks[chunkName] = {};
+          
+                // Prepend the public path to all chunk files
+                let chunkFiles = [].concat(chunk.files).map(chunkFile => publicPath + chunkFile);
+          
+                // Append a hash for cache busting
+                if (this.options.hash) {
+                  chunkFiles = chunkFiles.map(chunkFile => self.appendHash(chunkFile, compilationHash));
+                }
+          
+                // Webpack outputs an array for each chunk when using sourcemaps
+                // or when one chunk hosts js and css simultaneously
+                const js = chunkFiles.find(chunkFile => /.js($|\?)/.test(chunkFile));
+                if (js) {
+                  assets.chunks[chunkName].size = chunk.size;
+                  assets.chunks[chunkName].entry = js;
+                  assets.chunks[chunkName].hash = chunk.hash;
+                  assets.js.push(js);
+                }
+          
+                // Gather all css files
+                const css = chunkFiles.filter(chunkFile => /.css($|\?)/.test(chunkFile));
+                assets.chunks[chunkName].css = css;
+                assets.css = assets.css.concat(css);
+              }
+          
+              // Duplicate css assets can occur on occasion if more than one chunk
+              // requires the same css.
+              assets.css = _.uniq(assets.css);
+          
+              return assets;
+            }
+            fs.writeFile(path.resolve('dist/app.js'),JSON.stringify(assets),function(err){
+              if(err){
+                return console.log(err)
+              }
+              console.log("Success")
+            })
+          });
+        }
+      })
     }
     return configNew
   },