From aa24cefccdb2fcd9a73297cbfb814e9198f1b07a Mon Sep 17 00:00:00 2001 From: Aicirou <2643053021@qq.com> Date: Wed, 29 Apr 2020 09:45:06 +0800 Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=E6=89=93=E5=8C=85=E4=BE=9D?= =?UTF-8?q?=E8=B5=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- dependencies-cdn.js | 14 +-- package-lock.json | 10 ++- package.json | 1 + public/app.js | 6 +- public/nginx.conf | 9 +- src/components/ace-editor/index.js | 93 ++++++++++++++++++++ src/view/page/GoText.vue | 14 +-- vue.config.js | 133 ++++++++++++++++++++++++++++- 8 files changed, 256 insertions(+), 24 deletions(-) create mode 100644 src/components/ace-editor/index.js diff --git a/dependencies-cdn.js b/dependencies-cdn.js index 33adfff..e058e9e 100644 --- a/dependencies-cdn.js +++ b/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/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/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/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', 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/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/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/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: '' }, ] \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index a86d610..cc60c5c 100644 --- a/package-lock.json +++ b/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": { diff --git a/package.json b/package.json index a76ad2e..b539714 100644 --- a/package.json +++ b/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" }, diff --git a/public/app.js b/public/app.js index febfb57..0e13ce1 100644 --- a/public/app.js +++ b/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/app.066f1c02.js' + 'https://cloud.jsonpop.cn/go2index/dist/test/chunk-vendors.fefb89d7.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 => { diff --git a/public/nginx.conf b/public/nginx.conf index 31bf056..998801b 100644 --- a/public/nginx.conf +++ b/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 / { - root /Users/jieshi/Desktop/MyWork/VueWork/go2index-theme-acrou/dist; - index index.html index.htm; - } + # location / { + # root /Users/momik/Documents/MyWork/OpenSource/go2index-theme-acrou/dist; + # index index.html index.htm; + # } } \ No newline at end of file diff --git a/src/components/ace-editor/index.js b/src/components/ace-editor/index.js new file mode 100644 index 0000000..0a2c4a1 --- /dev/null +++ b/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); + } +} diff --git a/src/view/page/GoText.vue b/src/view/page/GoText.vue index ff91c58..c095b8c 100644 --- a/src/view/page/GoText.vue +++ b/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/mode/html"); - () => import("brace/mode/javascript"); //language - () => import("brace/mode/less"); - () => import("brace/theme/chrome"); - () => import("brace/snippets/javascript"); //snippet + import("brace/ext/language_tools"); //language extension prerequsite... + import("brace/mode/html"); + import("brace/mode/javascript"); //language + import("brace/mode/less"); + import("brace/theme/chrome"); + import("brace/snippets/javascript"); //snippet }, } } diff --git a/vue.config.js b/vue.config.js index cb0eef3..835a053 100644 --- a/vue.config.js +++ b/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 }, @@ -67,4 +198,4 @@ module.exports = { }, }, }, -}; +}; \ No newline at end of file