大幅缩减build体积

oj/build/webpack.base.conf.js

@@ -1,5 +1,6 @@
 var path = require('path')
 var utils = require('./utils')
+var webpack = require('webpack')
 var config = require('../config')
 var vueLoaderConfig = require('./vue-loader.conf')
 
@@ -19,6 +20,7 @@ module.exports = {
       : config.dev.assetsPublicPath
   },
   resolve: {
+    modules: ['node_modules'],
     extensions: ['.js', '.vue', '.json'],
     alias: {
       'vue$': 'vue/dist/vue.esm.js',
@@ -45,7 +47,8 @@ module.exports = {
       },
       {
         test: /\.js$/,
-        loader: 'babel-loader',
+        loader: 'babel-loader?cacheDirectory',
+        exclude: /node_modules/,
         include: [resolve('src'), resolve('test')]
       },
       {
@@ -65,5 +68,8 @@ module.exports = {
         }
       }
     ]
-  }
+  },
+  plugins: [
+    new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /zh-cn/)
+  ]
 }

oj/package-lock.json

@@ -1886,9 +1886,9 @@
       "dev": true
     },
     "codemirror": {
-      "version": "5.28.0",
-      "resolved": "http://registry.npm.taobao.org/codemirror/download/codemirror-5.28.0.tgz",
-      "integrity": "sha1-KXjZKA1nE1Gk9XN9BrvWgaD9b4M="
+      "version": "5.30.0",
+      "resolved": "http://registry.npm.taobao.org/codemirror/download/codemirror-5.30.0.tgz",
+      "integrity": "sha1-huV91epVNay8+ccgeXtM7+BbWnA="
     },
     "color": {
       "version": "0.11.4",
@@ -4491,7 +4491,7 @@
     },
     "highlight.js": {
       "version": "9.12.0",
-      "resolved": "http://registry.npm.taobao.org/highlight.js/download/highlight.js-9.12.0.tgz",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-9.12.0.tgz",
       "integrity": "sha1-5tnb5Xy+/mB1HwKvM2GVhwyQwB4="
     },
     "hmac-drbg": {
@@ -8027,12 +8027,12 @@
       "resolved": "http://registry.npm.taobao.org/vue/download/vue-2.4.4.tgz",
       "integrity": "sha1-6pVQuWpxRl/SuLF7YWc7NWGGF4k="
     },
-    "vue-codemirror": {
-      "version": "3.1.4",
-      "resolved": "http://registry.npm.taobao.org/vue-codemirror/download/vue-codemirror-3.1.4.tgz",
-      "integrity": "sha1-2vX1Z9H3Uy7kW65IuGP5tiH0KVg=",
+    "vue-codemirror-lite": {
+      "version": "1.0.2",
+      "resolved": "http://registry.npm.taobao.org/vue-codemirror-lite/download/vue-codemirror-lite-1.0.2.tgz",
+      "integrity": "sha1-7mxnlom3I7OvOANChG/E/c5rf7Y=",
       "requires": {
-        "codemirror": "5.28.0"
+        "codemirror": "5.30.0"
       }
     },
     "vue-cropper": {
@@ -8049,14 +8049,6 @@
         "lodash.debounce": "4.0.8"
       }
     },
-    "vue-highlightjs": {
-      "version": "1.3.3",
-      "resolved": "http://registry.npm.taobao.org/vue-highlightjs/download/vue-highlightjs-1.3.3.tgz",
-      "integrity": "sha1-KaDVcTL8HOFc+mHolpGPW3GMXVI=",
-      "requires": {
-        "highlight.js": "9.12.0"
-      }
-    },
     "vue-hot-reload-api": {
       "version": "2.1.0",
       "resolved": "http://registry.npm.taobao.org/vue-hot-reload-api/download/vue-hot-reload-api-2.1.0.tgz",

oj/package.json

@@ -14,14 +14,14 @@
     "axios": "^0.16.2",
     "browser-detect": "^0.2.18",
     "echarts": "^3.6.2",
+    "highlight.js": "^9.12.0",
     "i": "^0.3.5",
     "iview": "^2.3.2",
     "moment": "^2.18.1",
     "vue": "^2.4.4",
-    "vue-codemirror": "^3.1.4",
+    "vue-codemirror-lite": "^1.0.2",
     "vue-cropper": "^0.2.1",
     "vue-echarts": "^2.4.1",
-    "vue-highlightjs": "^1.3.3",
     "vue-router": "^2.7.0",
     "vuex": "^2.4.0",
     "vuex-router-sync": "^4.3.2"

oj/src/components/CodeMirror.vue

@@ -13,41 +13,39 @@
       <Col :span=10>
       <div class="fl-right">
         <span>Theme:</span>
-          <Select v-model="options.theme" class="adjust">
+        <Select v-model="options.theme" @on-change="onThemeChange" class="adjust">
           <Option v-for="item in themes" :key="item.label" :value="item.value">{{item.label}}
           </Option>
         </Select>
       </div>
       </Col>
     </Row>
-    <codemirror :code="currentValue" :options="options" @change="onEditorCodeChange" ref="myEditor">
+    <codemirror :value="value" :options="options" @change="onEditorCodeChange" ref="myEditor">
     </codemirror>
   </div>
 </template>
 <script>
-import { codemirror } from 'vue-codemirror'
+  import { codemirror } from 'vue-codemirror-lite'
 
-// theme
-import 'codemirror/theme/monokai.css'
-import 'codemirror/theme/solarized.css'
-import 'codemirror/theme/base16-light.css'
-import 'codemirror/theme/twilight.css'
-import 'codemirror/theme/material.css'
+  // theme
+  import 'codemirror/theme/monokai.css'
+  import 'codemirror/theme/solarized.css'
+  import 'codemirror/theme/material.css'
 
-// mode
-import 'codemirror/mode/clike/clike.js'
-import 'codemirror/mode/python/python.js'
+  // mode
+  import 'codemirror/mode/clike/clike.js'
+  import 'codemirror/mode/python/python.js'
 
-// active-line.js
-import 'codemirror/addon/selection/active-line.js'
+  // active-line.js
+  import 'codemirror/addon/selection/active-line.js'
 
-// foldGutter
-import 'codemirror/addon/fold/foldgutter.css'
-import 'codemirror/addon/fold/foldgutter.js'
-import 'codemirror/addon/fold/brace-fold.js'
-import 'codemirror/addon/fold/indent-fold.js'
+  // foldGutter
+  import 'codemirror/addon/fold/foldgutter.css'
+  import 'codemirror/addon/fold/foldgutter.js'
+  import 'codemirror/addon/fold/brace-fold.js'
+  import 'codemirror/addon/fold/indent-fold.js'
 
-export default {
+  export default {
     name: 'CodeMirror',
     components: {
       codemirror
@@ -66,13 +64,12 @@ export default {
     },
     data () {
       return {
-      currentValue: '',
         lang: 'C++',
         options: {
           // codemirror options
           tabSize: 4,
           mode: 'text/x-c++src',
-        theme: 'solarized',
+          theme: 'monokai',
           lineNumbers: true,
           line: true,
           // 代码折叠
@@ -81,7 +78,7 @@ export default {
           // 选中文本自动高亮，及高亮方式
           styleSelectedText: true,
           lineWrapping: false,
-        highlightSelectionMatches: { showToken: /\w/, annotateScrollbar: true }
+          highlightSelectionMatches: {showToken: /\w/, annotateScrollbar: true}
         },
         mode: {
           'C': 'text/x-csrc',
@@ -90,40 +87,46 @@ export default {
           'Python2': 'text/x-python'
         },
         themes: [
-        { label: 'Monokai', value: 'monokai' },
-        { label: 'Solarized Light', value: 'solarized' },
-        { label: 'Base16', value: 'base16-light' },
-        { label: 'Twilight', value: 'twilight' },
-        { label: 'Material', value: 'material' }
+          {label: 'Monokai', value: 'monokai'},
+          {label: 'Solarized Light', value: 'solarized'},
+          {label: 'Material', value: 'material'}
         ]
       }
     },
     mounted () {
-    this.currentValue = this.value
+      this.editor.focus()
     },
     methods: {
       onEditorCodeChange (newCode) {
-      this.currentValue = newCode
-      this.$emit('changeCode', newCode)
+        this.$emit('update:value', newCode)
       },
       onLangChange (newVal) {
-      this.$refs.myEditor.editor.setOption('mode', this.mode[newVal])
+        this.editor.setOption('mode', this.mode[newVal])
         this.$emit('changeLang', newVal)
+      },
+      onThemeChange (newTheme) {
+        this.editor.setOption('theme', newTheme)
+      }
+    },
+    computed: {
+      editor () {
+        // get current editor object
+        return this.$refs.myEditor.editor
+      }
     }
   }
-}
 </script>
 
 <style lang="less" scoped>
-.CodeMirror {
+  .CodeMirror {
     height: auto !important;
-}
+  }
 
-.CodeMirror-scroll {
+  .CodeMirror-scroll {
     min-height: 300px;
-}
+  }
 
-.header {
+  .header {
     margin: 5px 5px 15px 5px;
     .adjust {
       width: 150px;
@@ -132,5 +135,5 @@ export default {
     .fl-right {
       float: right;
     }
-}
+  }
 </style>

oj/src/components/Highlight.vue

@@ -1,5 +1,5 @@
 <template>
-  <pre v-highlightjs="code"><code :class="language" :style="styleObject"></code></pre>
+  <pre v-highlight="code"><code :class="language" :style="styleObject"></code></pre>
 </template>
 
 <script>

oj/src/main.js

@@ -2,13 +2,10 @@ import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
 import store from './store'
-import iView from 'iview'
 import locale from 'iview/src/locale/lang/en-US'
-import VueHighlightJS from 'vue-highlightjs'
 
+import iView from 'iview'
 import 'iview/dist/styles/iview.css'
-import 'highlight.js/styles/atom-one-light.css'
-import './styles/index.less'
 
 import Panel from '~/Panel.vue'
 import VerticalMenu from '~/verticalMenu/verticalMenu.vue'
@@ -27,6 +24,17 @@ import 'echarts/lib/component/tooltip'
 import 'echarts/lib/component/toolbox'
 import 'echarts/lib/component/markPoint'
 
+import hljs from 'highlight.js/lib/highlight'
+import cpp from 'highlight.js/lib/languages/cpp'
+import python from 'highlight.js/lib/languages/python'
+import java from 'highlight.js/lib/languages/java'
+import 'highlight.js/styles/atom-one-light.css'
+import './styles/index.less'
+
+hljs.registerLanguage('cpp', cpp)
+hljs.registerLanguage('java', java)
+hljs.registerLanguage('python', python)
+
 // add global EventBus
 const EventBus = new Vue()
 Object.defineProperties(Vue.prototype, {
@@ -42,8 +50,34 @@ Object.keys(filters).forEach(key => {
   Vue.filter(key, filters[key])
 })
 
+// highlight.js
+Vue.directive('highlight', {
+  deep: true,
+  bind: function (el, binding) {
+    // on first bind, highlight all targets
+    let targets = el.querySelectorAll('code')
+    targets.forEach((target) => {
+      // if a value is directly assigned to the directive, use this
+      // instead of the element content.
+      if (binding.value) {
+        target.textContent = binding.value
+      }
+      hljs.highlightBlock(target)
+    })
+  },
+  componentUpdated: function (el, binding) {
+    // after an update, re-fill the content and then highlight
+    let targets = el.querySelectorAll('code')
+    targets.forEach((target) => {
+      if (binding.value) {
+        target.textContent = binding.value
+        hljs.highlightBlock(target)
+      }
+    })
+  }
+})
+
 Vue.use(iView, {locale})
-Vue.use(VueHighlightJS)
 
 Vue.component('ECharts', ECharts)
 Vue.component(VerticalMenu.name, VerticalMenu)

oj/src/views/problem/Problem.vue

@@ -40,7 +40,7 @@
       </Panel>
       <!--problem main end-->
       <Card :padding="20" id="submit-code" dis-hover>
-        <CodeMirror :value="code" @changeCode="onChangeCode" @changeLang="onChangeLang"></CodeMirror>
+        <CodeMirror :value.sync="code" @changeLang="onChangeLang"></CodeMirror>
         <Row type="flex" justify="space-between">
           <Col :span="10">
           <div class="status" v-if="statusVisible && contestRuleType !== 'OI'">
@@ -241,9 +241,6 @@
       handleRoute (route) {
         this.$router.push(route)
       },
-      onChangeCode (newCode) {
-        this.code = newCode
-      },
       onChangeLang (newLang) {
         this.language = newLang
       },