feature: add global megalo cli support

.gitignore

@@ -1,5 +1,6 @@
 node_modules
 .DS_Store
+.vscode
 design
 *.log
 packages/test

packages/@megalo/cli-service/generator/index.js

@@ -0,0 +1,153 @@
+module.exports = (api, options) => {
+  const tplDir = api.hasPlugin('typescript') ? './template/typescript' : './template/main'
+  api.render(tplDir, {
+    doesCompile: api.hasPlugin('babel') || api.hasPlugin('typescript')
+  })
+
+  const scopedPkgVersions = api.generator.scopedPkgVersions
+  let pkgList
+
+  const scripts = {
+    'build:wechat': 'megalo-cli-service build',
+    'build:alipay': 'megalo-cli-service build --platform alipay',
+    'build:swan': 'megalo-cli-service build --platform swan',
+    'build:toutiao': 'megalo-cli-service build --platform toutiao',
+    'dev:alipay': 'megalo-cli-service serve --platform alipay',
+    'dev:swan': 'megalo-cli-service serve --platform swan',
+    'dev:wechat': 'megalo-cli-service serve',
+    'dev:toutiao': 'megalo-cli-service serve --platform toutiao',
+  }
+
+  const dependencies = {
+    'octoparse': '^0.4.2',
+    '@megalo/vhtml-plugin': '^0.1.2',
+    'megalo': '0.10.1'
+  }
+
+  const devDependencies = {
+    '@megalo/target': '^0.7.4-0',
+  }
+
+  pkgList = [
+    '@megalo/babel-preset-app',
+    '@megalo/cli-service',
+    '@megalo/template-compiler'
+  ]
+  pkgList.forEach(p => devDependencies[p] = scopedPkgVersions[p])
+
+  if (api.hasPlugin('eslint')) {
+    scripts['lint'] = 'megalo-cli-service lint'
+
+    pkgList = [
+      '@megalo/cli-plugin-eslint',
+      '@megalo/eslint-config-standard'
+    ]
+    pkgList.forEach(p => devDependencies[p] = scopedPkgVersions[p])
+
+    devDependencies['eslint'] = '^5.15.3'
+  }
+
+  if (options.vuex) {
+    dependencies['vuex'] = '^3.1.0'
+
+    if (api.hasPlugin('typescript')) {
+      dependencies['vuex-class'] = '^0.3.2'
+    }
+  }
+
+  if (options.needMegaloAPI === 'Yes') {
+    pkgList = [
+      '@megalo/api'
+    ]
+    pkgList.forEach(p => dependencies[p] = scopedPkgVersions[p])
+  }
+
+  if (api.hasPlugin('typescript')) {
+    dependencies['vue-property-decorator'] = '8.1.1'
+    dependencies['vue-class-component'] = '^7.0.2'
+
+    pkgList = [
+      '@megalo/cli-plugin-typescript'
+    ]
+    pkgList.forEach(p => devDependencies[p] = scopedPkgVersions[p])
+    devDependencies['@types/node'] = '^11.11.4'
+    devDependencies['miniprogram-api-typings'] = '^2.8.2'
+    devDependencies['typescript'] = '^3.4.4'
+
+    if (api.hasPlugin('eslint')) {
+      pkgList = [
+        '@megalo/eslint-config-typescript'
+      ]
+      pkgList.forEach(p => devDependencies[p] = scopedPkgVersions[p])
+    }
+  }
+
+  if (options.cssPreset === 'less') {
+    devDependencies['less'] = '^3.8.1'
+    devDependencies['less-loader'] = '^4.1.0'
+  } else if (options.cssPreset === 'stylus') {
+    devDependencies['stylus'] = '^0.54.5'
+    devDependencies['stylus-loader'] = '^3.0.2'
+  } else if (options.cssPreset === 'scss') {
+    devDependencies['node-sass'] = '^4.10.0'
+    devDependencies['sass-loader'] = '^7.1.0'
+  }
+
+  api.extendPackage({
+    scripts,
+    dependencies,
+    devDependencies,
+    'postcss': {
+      'plugins': {
+        'autoprefixer': {}
+      }
+    },
+    browserslist: [
+      '> 1%',
+      'last 2 versions'
+    ]
+  })
+
+  if (options.router) {
+    require('./router')(api, options)
+  }
+
+  if (options.vuex) {
+    require('./vuex')(api, options)
+  }
+
+  if (options.cssPreprocessor) {
+    const deps = {
+      // TODO: remove 'sass' option in v4 or rename 'dart-sass' to 'sass'
+      sass: {
+        'node-sass': '^4.9.0',
+        'sass-loader': '^7.1.0'
+      },
+      'node-sass': {
+        'node-sass': '^4.9.0',
+        'sass-loader': '^7.1.0'
+      },
+      'dart-sass': {
+        sass: '^1.18.0',
+        'sass-loader': '^7.1.0'
+      },
+      less: {
+        'less': '^3.0.4',
+        'less-loader': '^5.0.0'
+      },
+      stylus: {
+        'stylus': '^0.54.5',
+        'stylus-loader': '^3.0.2'
+      }
+    }
+
+    api.extendPackage({
+      devDependencies: deps[options.cssPreprocessor]
+    })
+  }
+
+  // additional tooling configurations
+  if (options.configs) {
+    api.extendPackage(options.configs)
+  }
+}

packages/@megalo/cli-service/generator/router/index.js

@@ -0,0 +1,38 @@
+module.exports = (api, options = {}) => {
+  api.injectImports(api.entryFile, `import router from './router'`)
+  api.injectRootOptions(api.entryFile, `router`)
+  api.extendPackage({
+    dependencies: {
+      'vue-router': '^3.0.3'
+    }
+  })
+  api.render('./template', {
+    historyMode: options.routerHistoryMode,
+    doesCompile: api.hasPlugin('babel') || api.hasPlugin('typescript')
+  })
+
+  if (api.invoking) {
+    api.postProcessFiles(files => {
+      const appFile = files[`src/App.vue`]
+      if (appFile) {
+        files[`src/App.vue`] = appFile.replace(/^<template>[^]+<\/script>/, `
+<template>
+  <div id="app">
+    <div id="nav">
+      <router-link to="/">Home</router-link> |
+      <router-link to="/about">About</router-link>
+    </div>
+    <router-view/>
+  </div>
+</template>
+        `.trim())
+      }
+    })
+
+    if (api.hasPlugin('typescript')) {
+      /* eslint-disable-next-line node/no-extraneous-require */
+      const convertFiles = require('@vue/cli-plugin-typescript/generator/convert')
+      convertFiles(api)
+    }
+  }
+}

packages/@megalo/cli-service/generator/router/template/src/router.js

@@ -0,0 +1,33 @@
+import Vue from 'vue'
+import Router from 'vue-router'
+import Home from './views/Home.vue'
+
+Vue.use(Router)
+
+export default new Router({
+  <%_ if (historyMode) { _%>
+  mode: 'history',
+  base: process.env.BASE_URL,
+  <%_ } _%>
+  routes: [
+    {
+      path: '/',
+      name: 'home',
+      component: Home
+    },
+    {
+      path: '/about',
+      name: 'about',
+      // route level code-splitting
+      // this generates a separate chunk (about.[hash].js) for this route
+      // which is lazy-loaded when the route is visited.
+      <%_ if (doesCompile) { _%>
+      component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
+      <%_ } else { _%>
+      component: function () { 
+        return import(/* webpackChunkName: "about" */ './views/About.vue')
+      }
+      <%_ } _%>
+    }
+  ]
+})

packages/@megalo/cli-service/generator/router/template/src/views/About.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="about">
+    <h1>This is an about page</h1>
+  </div>
+</template>

packages/@megalo/cli-service/generator/router/template/src/views/Home.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="home">
+    <img alt="Vue logo" src="../assets/logo.png">
+    <%_ if (!rootOptions.bare) { _%>
+    <HelloWorld msg="Welcome to Your Vue.js App"/>
+    <%_ } else { _%>
+    <h1>Welcome to Your Vue.js App</h1>
+    <%_ } _%>
+  </div>
+</template>
+<%_ if (!rootOptions.bare) { _%>
+
+<script>
+// @ is an alias to /src
+import HelloWorld from '@/components/HelloWorld.vue'
+
+export default {
+  name: 'home',
+  components: {
+    HelloWorld
+  }
+}
+</script>
+<%_ } _%>

packages/@megalo/cli/templates/typescript/README → packages/@megalo/cli-service/generator/template/main/README.md

@@ -1,4 +1,4 @@
-# <%- projectName %>
+# <%- rootOptions.projectName %>
 
 ## 运行
 

packages/@megalo/cli/templates/typescript/megalo.config.js → packages/@megalo/cli-service/generator/template/main/megalo.config.js

@@ -3,7 +3,7 @@ module.exports = {
   productionSourceMap: false,
 
   // 开启eslint格式化代码
-  lintOnSave: <%= features.includes('eslint') %>,
+  lintOnSave: <%= rootOptions.plugins['@megalo/cli-plugin-eslint'].lintOn[0] === 'Save' %>,
 
   configureWebpack: config => {
     // 你可以在这里粗放的修改webpack的配置并返回
@@ -35,7 +35,7 @@ module.exports = {
         // https://github.com/shama/stylus-loader
       },
         // https://github.com/megalojs/megalo-px2rpx-loader
-      px2rpx: <% if (needPx2Rpx === 'Yes') { %>{
+      px2rpx: <% if (rootOptions.px2rpx) { %>{
         rpxUnit: 0.5
       }<% } else {%>false<% } %>
     }

packages/@megalo/cli/templates/main/src/main.js → packages/@megalo/cli-service/generator/template/main/src/main.js

@@ -1,14 +1,12 @@
 import App from './App'
 import Vue from 'vue'
-import VHtmlPlugin from '@megalo/vhtml-plugin'<% if (features.includes('vuex')) { %>
-import Vuex from 'vuex'<% } %>
+import VHtmlPlugin from '@megalo/vhtml-plugin'
 
-Vue.use(VHtmlPlugin)<% if (features.includes('vuex')) { %>
-Vue.use(Vuex)
-
-const store = require('./store').default
+Vue.use(VHtmlPlugin)
+<%_ if (rootOptions.vuex) { _%>
 Vue.prototype.$store = store
-<% } %>
+<%_ } _%>
+
 const app = new Vue(App)
 
 app.$mount()
@@ -18,7 +16,7 @@ export default {
     // pages 的首个页面会被编译成首页
     pages: [
       'pages/hello',
-      'pages/my/my'<% if (features.includes('vuex')) { %>,
+      'pages/my/my'<% if (rootOptions['vuex']) { %>,
       'pages/vuex/vuex'<% } %>
     ],
     tabBar: {
@@ -36,7 +34,7 @@ export default {
           text: 'my',
           iconPath: 'native/tabbar/mine.png',
           selectedIconPath: 'native/tabbar/mine_on.png'
-        }<% if (features.includes('vuex')) { %>,
+        }<% if (rootOptions['vuex']) { %>,
         {
           pagePath: 'pages/vuex/vuex',
           text: 'vuex',

packages/@megalo/cli/templates/main/src/pages/hello.vue → packages/@megalo/cli-service/generator/template/main/src/pages/hello.vue

@@ -63,7 +63,7 @@ export default {
   }
 }
 </script>
-<% if (features.includes('css-pre-processors')) { %>
+<% if (rootOptions['cssPreProcessors']) { %>
 <style lang="<%= cssPreset %>" scoped>
 .app{
   padding-top: 100px;

packages/@megalo/cli/templates/main/src/pages/my/my.vue → packages/@megalo/cli-service/generator/template/main/src/pages/my/my.vue

@@ -63,7 +63,7 @@ export default {
   }
 }
 </script>
-<% if (features.includes('css-pre-processors')) { %>
+<% if (rootOptions['cssPreProcessors']) { %>
 <style lang="<%= cssPreset %>">
 .app{
   padding-top: 100px;

packages/@megalo/cli/templates/main/README → packages/@megalo/cli-service/generator/template/typescript/README.md

@@ -1,4 +1,4 @@
-# <%- projectName %>
+# <%- rootOptions.projectName %>
 
 ## 运行
 

packages/@megalo/cli/templates/main/megalo.config.js → packages/@megalo/cli-service/generator/template/typescript/megalo.config.js

@@ -3,7 +3,7 @@ module.exports = {
   productionSourceMap: false,
 
   // 开启eslint格式化代码
-  lintOnSave: <%= features.includes('eslint') %>,
+  lintOnSave: <%= rootOptions.plugins['@megalo/cli-plugin-eslint'].lintOn[0] === 'Save' %>,
 
   configureWebpack: config => {
     // 你可以在这里粗放的修改webpack的配置并返回
@@ -35,7 +35,7 @@ module.exports = {
         // https://github.com/shama/stylus-loader
       },
         // https://github.com/megalojs/megalo-px2rpx-loader
-      px2rpx: <% if (needPx2Rpx === 'Yes') { %>{
+      px2rpx: <% if (rootOptions.px2rpx) { %>{
         rpxUnit: 0.5
       }<% } else {%>false<% } %>
     }