refactor: build config (#408)

* refactor: build config

* chore: fix conflict

* fix: 404 page path

Author: QingWei-Li

.eslintignore

@@ -1,3 +1,5 @@
-.git/
+.git
 packages/docsify-server-renderer/build.js
-node_modules
+node_modules
+build
+server.js

.eslintrc

@@ -1,15 +1,20 @@
 {
-  "extends": [
-    "vue"
-  ],
-  "parserOptions": {
-      "ecmaVersion": 8
-    },
-  "env": {
-    "browser": true
+  "extends": "xo-space/browser",
+  "rules": {
+    "semi": [2, "never"],
+    "no-return-assign": "off",
+    "no-unused-expressions": "off",
+    "no-new-func": "off",
+    "no-multi-assign": "off",
+    "no-mixed-operators": "off",
+    "max-params": "off",
+    "no-script-url": "off",
+    "camelcase": "off",
+    "no-warning-comments": "off"
   },
   "globals": {
     "Docsify": true,
-    "$docsify": true
+    "$docsify": true,
+    "process": true
   }
 }

README.md

@@ -71,7 +71,6 @@ Move to [awesome-docsify](https://github.com/QingWei-Li/awesome-docsify)
 
 ```bash
 npm run bootstrap && npm run dev
-open http://localhost:3000
 ```
 
 ## Backers

app.js

@@ -1,19 +1,19 @@
-var rollup = require('rollup')
-var buble = require('rollup-plugin-buble')
-var commonjs = require('rollup-plugin-commonjs')
-var nodeResolve = require('rollup-plugin-node-resolve')
-var string = require('rollup-plugin-string')
-var uglify = require('rollup-plugin-uglify')
-var replace = require('rollup-plugin-replace')
-var isProd = process.argv[process.argv.length - 1] !== '--dev'
-var version = process.env.VERSION || require('../package.json').version
+const rollup = require('rollup')
+const buble = require('rollup-plugin-buble')
+const commonjs = require('rollup-plugin-commonjs')
+const nodeResolve = require('rollup-plugin-node-resolve')
+const uglify = require('rollup-plugin-uglify')
+const replace = require('rollup-plugin-replace')
+const isProd = process.env.NODE_ENV === 'production'
+const version = process.env.VERSION || require('../package.json').version
+const chokidar = require('chokidar')
+const path = require('path')
 
-var build = function (opts) {
+const build = function(opts) {
   rollup
     .rollup({
-      input: 'src/' + opts.entry,
+      input: opts.input,
       plugins: (opts.plugins || []).concat([
-        string({ include: '**/*.css' }),
         buble(),
         commonjs(),
         nodeResolve(),
@@ -23,8 +23,8 @@ var build = function (opts) {
         })
       ])
     })
-    .then(function (bundle) {
-      var dest = 'lib/' + (opts.output || opts.entry)
+    .then(function(bundle) {
+      var dest = 'lib/' + (opts.output || opts.input)
 
       console.log(dest)
       bundle.write({
@@ -33,45 +33,86 @@ var build = function (opts) {
         strict: false
       })
     })
-    .catch(function (err) {
+    .catch(function(err) {
       console.error(err)
     })
 }
-
-build({
-  entry: 'core/index.js',
-  output: 'docsify.js'
-})
-
-var plugins = [
-  { name: 'search', entry: 'search/index.js' },
-  { name: 'ga', entry: 'ga.js' },
-  { name: 'emoji', entry: 'emoji.js' },
-  { name: 'external-script', entry: 'external-script.js' },
-  { name: 'front-matter', entry: 'front-matter/index.js' },
-  { name: 'zoom-image', entry: 'zoom-image.js' },
-  { name: 'disqus', entry: 'disqus.js' },
-  { name: 'gitalk', entry: 'gitalk.js' }
-]
-
-plugins.forEach(item => {
+const buildCore = function() {
   build({
-    entry: 'plugins/' + item.entry,
-    output: 'plugins/' + item.name + '.js'
+    input: 'src/core/index.js',
+    output: 'docsify.js'
   })
-})
 
-if (isProd) {
-  build({
-    entry: 'core/index.js',
-    output: 'docsify.min.js',
-    plugins: [uglify()]
-  })
-  plugins.forEach(item => {
+  if (isProd) {
     build({
-      entry: 'plugins/' + item.entry,
-      output: 'plugins/' + item.name + '.min.js',
+      input: 'src/core/index.js',
+      output: 'docsify.min.js',
       plugins: [uglify()]
     })
+  }
+}
+const buildAllPlugin = function() {
+  var plugins = [
+    {name: 'search', input: 'search/index.js'},
+    {name: 'ga', input: 'ga.js'},
+    {name: 'emoji', input: 'emoji.js'},
+    {name: 'external-script', input: 'external-script.js'},
+    {name: 'front-matter', input: 'front-matter/index.js'},
+    {name: 'zoom-image', input: 'zoom-image.js'},
+    {name: 'disqus', input: 'disqus.js'},
+    {name: 'gitalk', input: 'gitalk.js'}
+  ]
+
+  plugins.forEach(item => {
+    build({
+      input: 'src/plugins/' + item.input,
+      output: 'plugins/' + item.name + '.js'
+    })
   })
+
+  if (isProd) {
+    plugins.forEach(item => {
+      build({
+        input: 'src/plugins/' + item.input,
+        output: 'plugins/' + item.name + '.min.js',
+        plugins: [uglify()]
+      })
+    })
+  }
+}
+
+if (!isProd) {
+  chokidar
+    .watch(['src/core', 'src/plugins'], {
+      atomic: true,
+      awaitWriteFinish: {
+        stabilityThreshold: 1000,
+        pollInterval: 100
+      }
+    })
+    .on('change', p => {
+      console.log('[watch] ', p)
+      const dirs = p.split(path.sep)
+      if (dirs[1] === 'core') {
+        buildCore()
+      } else if (dirs[2]) {
+        const name = path.basename(dirs[2], '.js')
+        const input = `src/plugins/${name}${
+          /\.js/.test(dirs[2]) ? '' : '/index'
+        }.js`
+
+        build({
+          input,
+          output: 'plugins/' + name + '.js'
+        })
+      }
+    })
+    .on('ready', () => {
+      console.log('[start]')
+      buildCore()
+      buildAllPlugin()
+    })
+} else {
+  buildCore()
+  buildAllPlugin()
 }

build/build-css.js

@@ -420,8 +420,8 @@ window.$docsify = {
 
 List of languages that will fallback to the default language when a page is request and didn't exists for the given local.
 
-Example: 
- 
+Example:
+
  - try to fetch the page of `/de/overview`. If this page exists, it'll be displayed
  - then try to fetch the default page `/overview` (depending on the default language). If this page exists, it'll be displayed
  - then display 404 page.

build/build.js

@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
   <meta charset="UTF-8">
   <title>docsify</title>
@@ -14,6 +15,7 @@
     }
   </style>
 </head>
+
 <body>
   <div id="app"></div>
   <script>
@@ -22,6 +24,7 @@
         '.*?/changelog': 'https://raw.githubusercontent.com/QingWei-Li/docsify/master/CHANGELOG',
         '/.*/_navbar.md': '/_navbar.md'
       },
+      notFoundPage: '_404.html',
       auto2top: true,
       basePath: '/docs/',
       executeScript: true,
@@ -33,11 +36,11 @@
       mergeNavbar: true,
       formatUpdated: '{MM}/{DD} {HH}:{mm}',
       plugins: [
-        function(hook, vm) {
+        function (hook, vm) {
           hook.beforeEach(function (html) {
             var url = 'https://github.com/QingWei-Li/docsify/blob/master/' + vm.route.file
             var editHtml = '[:memo: Edit Document](' + url + ')\n'
-  
+
             return editHtml
               + html
               + '\n----\n'
@@ -50,4 +53,5 @@
   </script>
   <script src="/lib/docsify.js"></script>
 </body>
-</html>
+
+</html>