tiny preview: build preview engine with webpack outputDir

ly525
1 parent 39d9f8fd
Showing 8 changed files with 209 additions and 13 deletions
back-end/h5-api/.gitignore
back-end/h5-api/api/work/controllers/Work.js
back-end/h5-api/config/hook.json
back-end/h5-api/public/engine-asset/.gitkeep
back-end/h5-api/views/engine.ejs
front-end/h5/build/engine.webpack.js
front-end/h5/src/components/core/editor/engine/index.js → front-end/h5/src/engine-entry.js
front-end/h5/src/mixins/load-plugins.js
+engine-assets
+
 ############################
 # OS X
 ############################
@@ -9,6 +9,7 @@ module.exports = {
   // GET /previewOne
   // strapi-hook-ejs: https://github.com/strapi/strapi/tree/master/packages/strapi-hook-ejs
   previewOne: async (ctx) => {
-    return ctx.render('engine', {work: { page2: []}});
+    const work = await strapi.services.work.findOne(ctx.params);
+    return ctx.render('engine', { work });
   }
 };
@@ -12,7 +12,7 @@
     "viewExt": "ejs",
     "partial": true,
     "cache": false,
-    "debug": true,
+    "debug": false,
     "layout": false
   }
 }
+<html>
+
+<head>
+  <meta charset="UTF-8">
+  <title>work.html</title>
+  <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
+  <meta content="yes" name="apple-mobile-web-app-capable">
+  <meta content="black" name="apple-mobile-web-app-status-bar-style">
+  <meta content="telephone=no" name="format-detection">
+  <meta content="email=no" name="format-detection">
+  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
+  <script type="text/javascript" src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/flexible.js"></script>
+  <!-- <link rel="stylesheet" href="/be-static/be-static-luban-h5/engine/engine.css"> -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css">
+  <link rel="stylesheet" href="https://meyerweb.com/eric/tools/css/reset/reset.css">
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>
+  <script>window.__work = <%- JSON.stringify(work) %></script>
+  <script src="/engine-assets/engine.js"></script>
+  <style>
+    .swiper-container {
+      width: 100%;
+      height: 100vh;
+    }
+  </style>
+</head>
+
+<body>
+  <div id="app">
+      <engine />
+  </div>
+  <script>
+    // Vue.component('engine', window.Engine)
+    new Vue({
+      el: '#app',
+      data: {
+        message: 'Hello Vue!'
+      },
+      // render: function (h) {
+      //   return (<engine />)
+      // }
+    });
+  </script>
+  <script>
+    var mySwiper = new Swiper('.swiper-container', {
+      // Optional parameters
+      direction: 'vertical',
+      loop: false,
+      // If we need pagination
+      pagination: {
+        el: '.swiper-pagination',
+      },
+      // Navigation arrows
+      navigation: {
+        nextEl: '.swiper-button-next',
+        prevEl: '.swiper-button-prev',
+      },
+      // And if we need scrollbar
+      scrollbar: {
+        el: '.swiper-scrollbar',
+      },
+    });
+  </script>
+  <!-- build:js scripts/vendor.js -->
+  <!-- endbuild -->
+</body>
+
+</html>
 \ No newline at end of file
+let path = require('path')
+let env = { NODE_ENV: '"production"' }
+let ora = require('ora')
+let rm = require('rimraf')
+let chalk = require('chalk')
+let webpack = require('webpack')
+
+function assetsPath (_path) {
+  let assetsSubDirectory = '/engine-assets'
+  return path.posix.join(assetsSubDirectory, _path)
+}
+
+function resolve (dir) {
+  // console.log(path.join(__dirname, '..', '../../back-end/preview/public/be-static-luban-h5/engine'));
+  return path.join(__dirname, '..', dir)
+}
+
+const engineBuildOutputDir = resolve('../../back-end/h5-api/public/engine-assets')
+
+process.env.NODE_ENV = 'production'
+
+let spinner = ora('building for production...')
+spinner.start()
+
+let webpackConfig = {
+  mode: 'production',
+  entry: {
+    engine: './src/engine-entry.js'
+  },
+  //   devtool: config.build.productionSourceMap ? '#source-map' : false,
+  devtool: '#source-map',
+  output: {
+    path: engineBuildOutputDir,
+    filename: '[name].js',
+    // publicPath: '/public-path',
+    library: 'Engine'
+  },
+  resolve: {
+    extensions: ['.js', '.vue', '.json']
+  },
+  externals: {
+  },
+  module: {
+    rules: [
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader'
+      },
+      {
+        test: /\.css$/,
+        use: [
+          'vue-style-loader',
+          {
+            loader: 'css-loader',
+            options: {
+              // enable CSS Modules
+              modules: true,
+              // customize generated class names
+              localIdentName: '[local]_[hash:base64:8]'
+            }
+          }
+        ]
+      },
+      {
+        test: /\.js$/,
+        loader: 'babel-loader',
+        include: [resolve('src'), resolve('test')]
+      },
+      {
+        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
+        loader: 'url-loader',
+        options: {
+          limit: 10000,
+          name: assetsPath('img/[name].[hash:7].[ext]')
+        }
+      },
+      {
+        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
+        loader: 'url-loader',
+        options: {
+          limit: 10000,
+          name: assetsPath('fonts/[name].[hash:7].[ext]')
+        }
+      }
+    ]
+  },
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env': env
+    })
+  ]
+}
+
+rm(engineBuildOutputDir, err => {
+  if (err) throw err
+  webpack(webpackConfig, function (err, stats) {
+    spinner.stop()
+    if (err) throw err
+    // process.stdout.write(
+    //   stats.toString({
+    //     colors: true,
+    //     modules: true,
+    //     children: true,
+    //     chunks: true,
+    //     chunkModules: true
+    //   }) + '\n\n'
+    // )
+
+    console.log(chalk.cyan('  Build complete.\n'))
+    console.log(
+      chalk.yellow(
+        '  Tip: built files are meant to be served over an HTTP server.\n' +
+          "  Opening index.html over file:// won't work.\n"
+      )
+    )
+  })
+})
@@ -5,14 +5,13 @@ import Vue from &#39;vue&#39;
 import Antd from 'ant-design-vue'
 import 'ant-design-vue/dist/antd.css'
 import 'font-awesome/css/font-awesome.min.css'
-import loadPluginMixin from '../../../../mixins/load-plugins.js'
-import Element from '../../models/element'
-
+import { pluginsList } from './mixins/load-plugins.js'
+import Element from './components/core/models/element'
 Vue.config.productionTip = false
 Vue.use(Antd)
+
 const Engine = {
   name: 'engine',
-  mixins: [loadPluginMixin],
   methods: {
     renderPreview (h, _elements) {
       const elements = _elements.map(element => new Element(element))
@@ -54,9 +53,19 @@ const Engine = {
   }
 }
-new Vue({
-  components: {
-    engine: Engine
-  },
-  render: h => h('engine')
-}).$mount('#app')
+const install = function (Vue) {
+  Vue.component(Engine.name, Engine)
+  pluginsList.forEach(plugin => {
+    Vue.component(plugin.name, plugin.component)
+  })
+}
+
+// auto install
+if (typeof window !== 'undefined' && window.Vue) {
+  install(window.Vue)
+}
+
+export default {
+  install,
+  Engine
+}
@@ -4,7 +4,7 @@ import LbpPicture from &#39;../components/plugins/lbp-picture&#39;
 import LbpText from '../components/plugins/lbp-text'
 import LbpFormInput from '../components/plugins/lbp-form-input'
-const pluginsList = [
+export const pluginsList = [
   {
     title: '图片',
     icon: 'photo',