@cloudbase/lowcode-builder 0.1.25 → 1.0.1

package/template/webpack/web.prod.js

@@ -3,10 +3,12 @@ const webpack = require('webpack');
 const TerserPlugin = require('terser-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const themeVars = require('./themeVars');
+const getCSSModuleLocalIdent = require('./getCSSModuleLocalIdent');
 const HappyPack = require('happypack');
-const core = 7;
+const core = 4;
 const happyThreadPool = HappyPack.ThreadPool({ size: core });
 
 const TS_LOADER_ID = 'ts-loader';
@@ -21,8 +23,9 @@ module.exports = function (options) {
     resolveModules,
     htmlTemplatePath,
     definePlugin = {},
+    devtool = false,
   } = options;
-  const isDevelopment = mode !== 'production';
+
   const babelLoader = {
     loader: 'babel-loader',
     options: {
@@ -35,7 +38,8 @@ module.exports = function (options) {
           {
             modules: false,
             targets: {
-              esmodules: true,
+              // esmodules: true,
+              browsers: ['defaults', 'iOS >= 10', 'safari >= 10'],
             },
           },
         ],
@@ -60,27 +64,45 @@ module.exports = function (options) {
       ].filter(Boolean),
     },
   };
+  const typescriptLoader = {
+    loader: 'ts-loader',
+    options: {
+      compilerOptions: {
+        target: 'ESNext',
+        module: 'ESNext',
+        esModuleInterop: true,
+      },
+      happyPackMode: true,
+      transpileOnly: true,
+    },
+  };
 
   let plugins = [
     new HappyPack({
-      id: TS_LOADER_ID,
+      id: 'vue',
+      cache: true,
+      verbose: true,
       loaders: [
         babelLoader,
+        typescriptLoader,
         {
-          loader: 'ts-loader',
+          loader: 'vue-loader',
           options: {
-            compilerOptions: {
-              target: 'ESNext',
-              module: 'ESNext',
-              esModuleInterop: true,
+            threadMode: true,
+            loaders: {
+              js: [babelLoader],
+              ts: [babelLoader, typescriptLoader],
             },
-            happyPackMode: true,
-            transpileOnly: true,
           },
         },
       ],
       threadPool: happyThreadPool,
     }),
+    new HappyPack({
+      id: TS_LOADER_ID,
+      loaders: [babelLoader, typescriptLoader],
+      threadPool: happyThreadPool,
+    }),
     new HappyPack({
       id: 'babel',
       loaders: [babelLoader],
@@ -94,7 +116,6 @@ module.exports = function (options) {
     new MiniCssExtractPlugin({
       filename: '[name].[contenthash].css',
       chunkFilename: '[id].[contenthash].css',
-      ignoreOrder: true,
     }),
     new webpack.DefinePlugin(
       Object.assign(
@@ -103,8 +124,8 @@ module.exports = function (options) {
           'process.env.SSR': false,
           'process.env.compileTool': `'webpack'`,
         },
-        definePlugin
-      )
+        definePlugin,
+      ),
     ),
     new CopyWebpackPlugin({
       patterns: [
@@ -115,31 +136,63 @@ module.exports = function (options) {
         },
       ],
     }),
+    new webpack.HashedModuleIdsPlugin({
+      hashFunction: 'sha256',
+      hashDigest: 'hex',
+      hashDigestLength: 20,
+    }),
+    new webpack.EnvironmentPlugin({
+      SSR: false,
+      WEBPACK_ENV: 'production',
+    }),
+  ];
+
+  const commonCSSLoaders = [
+    MiniCssExtractPlugin.loader,
+    {
+      loader: 'css-loader',
+      options: {
+        modules: {
+          auto: true,
+          getLocalIdent: getCSSModuleLocalIdent,
+        },
+        importLoaders: 2,
+      },
+    },
+    {
+      loader: 'postcss-loader',
+      options: {
+        postcssOptions: {
+          plugins: [
+            [
+              'postcss-pxtorem',
+              {
+                rootValue: 14,
+                propList: ['*'],
+                // todo
+                selectorBlackList: ['.weui-picker__indicator'],
+              },
+            ],
+          ],
+        },
+      },
+    },
   ];
-  if (!isDevelopment) {
-    plugins = plugins.concat([
-      new webpack.HashedModuleIdsPlugin({
-        hashFunction: 'sha256',
-        hashDigest: 'hex',
-        hashDigestLength: 20,
-      }),
-      new webpack.EnvironmentPlugin({
-        SSR: false,
-        WEBPACK_ENV: 'production',
-      }),
-    ]);
-  }
+
   return {
     context,
     entry,
-    mode,
+    /**
+     * 只要是构建都开启 production 以使用精简
+     */
+    mode: 'production',
     watch,
     output,
     externals,
     cache: {
       type: 'memory',
     },
-    devtool: isDevelopment ? 'eval' : false,
+    devtool: devtool,
     resolve: {
       extensions: ['.js', '.jsx', '.ts', '.tsx', '.json', '.scss', '.css'],
       modules: [...resolveModules],
@@ -151,6 +204,10 @@ module.exports = function (options) {
     },
     module: {
       rules: [
+        {
+          test: /\.vue$/,
+          loader: 'happypack/loader?id=vue',
+        },
         {
           test: /\.tsx?$/,
           exclude: /node_modules\/(?!@cloudbase\/weda-ui)|gsd-kbone-react/,
@@ -158,38 +215,13 @@ module.exports = function (options) {
         },
         {
           test: /\.(js|jsx)$/,
-          exclude: /node_modules\/(?!@cloudbase\/weda-ui)|gsd-kbone-react/,
+          exclude: /node_modules\/(?!(@cloudbase\/weda-ui)|(@tcwd\/vuera)|(@tcwd\/weapps-core))|gsd-kbone-react/,
           use: ['happypack/loader?id=babel'],
         },
         {
           test: /\.(scss|sass)$/,
           use: [
-            MiniCssExtractPlugin.loader,
-            {
-              loader: 'css-loader',
-              options: {
-                modules: false,
-                importLoaders: 2,
-              },
-            },
-            {
-              loader: 'postcss-loader',
-              options: {
-                postcssOptions: {
-                  plugins: [
-                    [
-                      'postcss-pxtorem',
-                      {
-                        rootValue: 14,
-                        propList: ['*'],
-                        // todo
-                        selectorBlackList: ['.weui-picker__indicator'],
-                      },
-                    ],
-                  ],
-                },
-              },
-            },
+            ...commonCSSLoaders,
             {
               loader: 'sass-loader',
               options: {
@@ -199,39 +231,19 @@ module.exports = function (options) {
           ],
         },
         {
-          test: /\.(css|less)$/,
+          test: /\.css$/,
+          use: [...cssLoaders],
+        },
+        {
+          test: /\.less$/,
           use: [
-            MiniCssExtractPlugin.loader,
-            {
-              loader: 'css-loader',
-              options: {
-                modules: false,
-                importLoaders: 2,
-              },
-            },
-            {
-              loader: 'postcss-loader',
-              options: {
-                postcssOptions: {
-                  plugins: [
-                    [
-                      'postcss-pxtorem',
-                      {
-                        rootValue: 14,
-                        propList: ['*'],
-                        // todo
-                        selectorBlackList: ['.weui-picker__indicator'],
-                      },
-                    ],
-                  ],
-                },
-              },
-            },
+            ...commonCSSLoaders,
             {
               loader: 'less-loader',
               options: {
                 lessOptions: {
                   modifyVars: themeVars,
+                  javascriptEnabled: true,
                 },
               },
             },
@@ -245,19 +257,21 @@ module.exports = function (options) {
     },
     plugins,
     optimization: {
+      concatenateModules: true,
       noEmitOnErrors: true,
-      removeEmptyChunks: true,
       splitChunks: {
+        maxSize: 3000000,
         cacheGroups: {
           base: {
             test: /(react|react-dom|react-router|react-router-dom|mobx|mobx-react-lite|@cloudbase\/js-sdk)/,
             chunks: 'all',
-            priority: 100, //优先级
+            minSize: 500000,
+            priority: 100, // 优先级
           },
           utils: {
-            test: /(lodash|dayjs|axios|kbone-api|fastclick)/,
+            test: /(lodash|dayjs|axios|kbone-api)/,
             chunks: 'all',
-            priority: 100, //优先级
+            priority: 100, // 优先级
           },
           'async-commons': {
             chunks: 'async',
@@ -271,22 +285,17 @@ module.exports = function (options) {
           },
         },
       },
-      ...(isDevelopment
-        ? {
-            minimize: false,
-            removeAvailableModules: false,
-            concatenateModules: true,
-          }
-        : {
-            minimizer: [
-              new TerserPlugin({
-                test: /\.js(\?.*)?$/i,
-                cache: false,
-                parallel: true,
-                sourceMap: false,
-              }),
-            ],
-          }),
+      minimizer: [
+        new TerserPlugin({
+          test: /\.js(\?.*)?$/i,
+          cache: false,
+          parallel: true,
+          sourceMap: false,
+          terserOptions: {
+            safari10: true,
+          },
+        }),
+      ],
     },
   };
 };

package/template/src/app/common.js

@@ -1,13 +0,0 @@
-<% mods.forEach((mod) => {%>
-  import * as <%= mod %> from '../lowcode/common/<%= mod %>'<%}) %>
-
-  function getModule(targetModule) {
-    if(targetModule.__esModule) {
-      return targetModule.default ? targetModule.default : targetModule
-    }
-  }
-
-  export default {
-  <% mods.forEach((mod) => {%>
-    <%= mod %>: getModule(<%= mod %>),<%}) %>
-  }

package/template/src/app/global-api.js

@@ -1,99 +0,0 @@
-import * as sdk from '@tcwd/weapps-sdk';
-import { createComputed } from 'utils';
-import store, { subPackageName } from '../store';
-import computed from '../store/computed';
-import common from './common';
-import { _isMobile } from '../utils';
-import actionMap from './material-actions';
-import { createWebApp, _ACTIONS_KEY as ACTIONS_KEY, _ROUTER_KEY as ROUTER_KEY } from '@cloudbase/weda-client';
-import { createDataset, EXTRA_API } from '../datasources/index';
-
-const mainAppKey = '__weappsMainApp';
-const appGlobal = process.env.isMiniprogram ? getApp() : window;
-
-export const app = createGlboalApi();
-export const $page = createPageApi();
-
-export function setCurrentPage(pageCtx) {
-  Object.assign($page, pageCtx);
-}
-
-function createGlboalApi() {
-  const mpApp = createWebApp();
-  const globalAPI = {
-    id: '<%= appId %>',
-    domain: '<%= domain %>',
-    formActions: {},
-    pages: {},
-    session: {
-      configure: sdk.configure,
-      request: sdk.request,
-      getSessionId: sdk.getSessionId,
-    },
-    state: store,
-    computed: createComputed(computed.global),
-    common,
-    ...mpApp,
-    // ... other sdk apis & apis from mp
-  }; // The global api exposed to lowcode
-
-  const dataset = createDataset('$global');
-  globalAPI.dataset = dataset;
-  globalAPI.state.dataset = dataset;
-  globalAPI.setState = (userSetState) => {
-    Object.keys(userSetState).forEach((keyPath) => {
-      globalAPI.utils.set(globalAPI.dataset.state, keyPath, userSetState[keyPath]);
-    });
-  };
-  /**
-   * 内部通用的设置状态变量值的方法
-   *  varPath 结构为 $global.<变量名> 即全局变量
-   *                $page.<变量名>  即当前页面变量
-   *                <pageId>.<变量名> 指定页面 pageId 的变量 (应当避免修改非当前页面的变量值)
-   */
-  globalAPI._setStateVal = (config) => {
-    EXTRA_API.setState(config.varPath, config.val);
-  };
-  if (subPackageName) {
-    // is sub app
-    globalAPI.mainApp = appGlobal[mainAppKey];
-  } else {
-    // is mainApp
-    appGlobal.app = globalAPI;
-    appGlobal[mainAppKey] = globalAPI;
-  }
-
-  // 挂运营平台上报对象到app里
-  globalAPI.yyptReport = appGlobal.yyptReport;
-
-  // # expose some sdk modules
-  const sdkModsIncluded = ['flow', 'getPageOptions', 'getLaunchOptions'];
-  sdkModsIncluded.forEach((key) => {
-    globalAPI[key] = sdk[key];
-  });
-
-  return globalAPI;
-}
-function createPageApi() {
-  const $page = {
-    state: {},
-    computed: {},
-    handler: {},
-    props: {},
-    widgets: {},
-    // 页面数据源变量存储位置
-    dataVar: {},
-  };
-  return $page;
-}
-
-// 分app 和 wx 挂载app
-export const mountAPIs = (sdks) => {
-  Object.keys(sdks).forEach((item) => {
-    let action = sdks[item];
-    if (!(item in ACTIONS_KEY) && !(item in ROUTER_KEY)) {
-      app[item] = action;
-    }
-  });
-  return app;
-};

package/template/src/app/handlers.js

@@ -1,13 +0,0 @@
-<%for(const pageId in pageModules) {
-    pageModules[pageId].filter(mod => mod.type === 'handler-fn' && mod.name !== '____index____').forEach(mod => {%>
-      import <%= pageId%>_<%= mod.name%> from '../lowcode/<%= pageId%>/handler/<%= mod.name%>'<%
-  })
-}%>
-
-<% for(const pageId in pageModules) {%>
-export const $$_<%=pageId %> = {<%
-    pageModules[pageId].filter(mod => mod.type === 'handler-fn' && mod.name !== '____index____').forEach(mod => {%>
-  ['<%= mod.name%>']: <%= pageId%>_<%= mod.name%>,<%
-  }) %>
-}
-<%}%>

package/template/src/app/material-actions.js

@@ -1,16 +0,0 @@
-// Imports all material actions
-<% materials.map((material,index) => { if(material.entries && material.entries.actions){ %>
-  import * as <%= _.camelCase(material.name)%>Actions_<%= index%> from 'libraries/<%=material.name%>@<%= material.version %>/<%=material.entries.actions%>';
-  <% } else if(material.entries && material.entries.entry) {%>
-  import <%= _.camelCase(material.name)%>_<%= index%> from 'libraries/<%=material.name%>@<%= material.version %>/<%=material.entries.entry%>';
-  const <%= _.camelCase(material.name)%>Actions_<%= index%> = <%= _.camelCase(material.name)%>_<%= index%>.actions
-  <% } else { (material.actions || []).map(act => {%>
-  import <%= _.camelCase(material.name)%>_<%=act.name%> from 'libraries/<%=material.name%>@<%= material.version %>/actions/<%= act.name %>'
-  <% }) }}) %>
-  export default {
-    <% materials.map((material, index) => {
-    %>  ['<%= material.name%>']:<% if(material.entries && (material.entries.entry || material.entries.actions)){ %> <%=_.camelCase(material.name)%>Actions_<%= index%>,
-    <% }else{ %> {<% (material.actions || []).map(act => { %>
-        ['<%= act.name%>']: <%= _.camelCase(material.name)%>_<%=act.name%>,<%})%>
-      },
-    <%}}) %>}

package/template/src/app/mountAppApis.js

@@ -1,25 +0,0 @@
-import { mountAPIs } from './global-api';
-import sdk from '@tcwd/weapps-sdk/lib/app-h5-sdk';
-
-mountAPIs(sdk);
-
-/**
- * 适配 wx.navigateTo 用法
- */
-function navigateTo({ url }) {
-  let paths = url.split('?');
-  let result = /pages\/([0-9a-zA-z_]+)\/index/.exec(paths[0]);
-  let hash = '';
-  if (result.length > 1) {
-    hash = `/${result[0]}`;
-  }
-  let path = `/${hash}`;
-  location.hash = `${path}${paths[1] ? `?${paths[1]}` : ''}`;
-}
-if (process.env.isApp) {
-  window.wx = {
-    ...(window.wx || {}),
-    ...sdk,
-    navigateTo,
-  };
-}

package/template/src/app/mountMpApis.js

@@ -1,4 +0,0 @@
-import { mountAPIs } from './global-api'
-import sdk from 'libraries/compatible-sdk/wx-sdk'
-
-mountAPIs(sdk)

package/template/src/datasources/config.js.tpl

@@ -1,23 +0,0 @@
-import dataSourceProfiles from './datasource-profiles'
-import datasetProfiles from './dataset-profiles'
-
-/**
- * 数据源基本配置
- */
-export default {
-  /** 当前是否处于正式发布模式 */
-  isProd: <%= isProd %>,
-  /** 低码应用ID */
-  appID: '<%= appID %>',
-  /** 云开发环境ID */
-  envID: '<%= envID %>',
-  /** 应用端ID */
-  tcbClientId: '<%= clientID %>',
-  /** 数据源描述对象数组 */
-  dataSourceProfiles: dataSourceProfiles,
-  /**
-   * 新的dataset变量配置对象
-   *  key 为页面ID(全局为$global), val 为变量配置数组
-   */
-  datasetProfiles: datasetProfiles,
-}

package/template/src/datasources/dataset-profiles.js.tpl

@@ -1,5 +0,0 @@
-/**
- * 全局及页面的数据源变量定义文件
- */
-
-export default <%= datasetProfiles %>

package/template/src/datasources/datasource-profiles.js.tpl

@@ -1,4 +0,0 @@
-/**
- * 数据源摘要描述数组
- */
-export default <%= datasourceProfiles %>

package/template/src/datasources/index.js

@@ -1,31 +0,0 @@
-import { _WEDA_CLOUD_SDK as WEDA_CLOUD_SDK } from '@cloudbase/weda-client'
-import config from './config';
-
-const {
-  setConfig,
-  initTcb,
-  CLOUD_SDK,
-  createDataset,
-  createStateDataSourceVar,
-  generateParamsParser,
-  EXTRA_API,
-  DS_API,
-  DS_SDK,
-  getAccessToken,
-} = WEDA_CLOUD_SDK
-
-export {
-  createDataset,
-  createStateDataSourceVar,
-  generateParamsParser,
-  EXTRA_API,
-  CLOUD_SDK,
-  DS_API,
-  DS_SDK,
-  setConfig,
-  initTcb,
-  getAccessToken,
-}
-
-setConfig(config);
-initTcb();