build: improvements for scripts & prod env (#4511)

package.json

@@ -3,19 +3,29 @@
   "version": "6.5.9",
   "description": "Most modern mobile touch slider and framework with hardware accelerated transitions",
   "scripts": {
-    "build:dev": "cross-env NODE_ENV=development node scripts/build",
-    "build:prod": "cross-env NODE_ENV=production node scripts/build",
-    "build:prod:core": "cross-env NODE_ENV=production node scripts/build --only core",
-    "build:prod:bundle": "cross-env NODE_ENV=production node scripts/build --only bundle",
+    "build:dev": "node scripts/build",
+    "build:dev:core": "node scripts/build --only core",
+    "build:dev:bundle": "node scripts/build --only bundle",
+    "build:dev:svelte": "node scripts/build --only svelte",
+    "build:dev:angular": "node scripts/build --only angular",
+    "build:dev:react": "node scripts/build --only react",
+    "build:dev:vue": "node scripts/build --only vue",
+    "build:prod": "node scripts/build --prod",
+    "build:prod:core": "npm run build:dev:core -- --prod",
+    "build:prod:bundle": "npm run build:dev:bundle -- --prod",
+    "build:prod:svelte": "npm run build:dev:svelte -- --prod",
+    "build:prod:angular": "npm run build:dev:angular -- --prod",
+    "build:prod:react": "npm run build:dev:react -- --prod",
+    "build:prod:vue": "npm run build:dev:vue -- --prod",
     "build-icons-font": "python ./scripts/icon-font/generate.py",
-    "playground:dev": "cross-env NODE_ENV=development node scripts/playground",
-    "playground:prod": "cross-env NODE_ENV=production node scripts/playground",
-    "watch:dev": "cross-env NODE_ENV=development node scripts/watch",
-    "watch:prod": "cross-env NODE_ENV=production node scripts/watch",
-    "core": "npm run build:dev && npm run playground:dev && concurrently --kill-others \"vite ./playground/core\" \"npm run watch:dev\" ",
-    "react": "npm run build:dev && concurrently --kill-others \"vite ./playground/react\" \"npm run watch:dev\"",
-    "vue": "npm run build:dev && concurrently --kill-others \"vite ./playground/vue\" \"npm run watch:dev\"",
-    "svelte": "npm run build:dev && concurrently --kill-others \"vite ./playground/svelte\" \"npm run watch:dev\"",
+    "playground:dev": "node scripts/playground",
+    "playground:prod": "node scripts/playground --prod",
+    "watch:dev": "node scripts/watch",
+    "watch:prod": "node scripts/watch --prod",
+    "core": "npm run build:dev:bundle && npm run playground:dev && concurrently --kill-others \"vite ./playground/core\" \"npm run watch:dev\" ",
+    "react": "npm run build:dev:react && concurrently --kill-others \"vite ./playground/react\" \"npm run watch:dev\"",
+    "vue": "npm run build:dev:vue && concurrently --kill-others \"vite ./playground/vue\" \"npm run watch:dev\"",
+    "svelte": "npm run build:dev:svelte && concurrently --kill-others \"vite ./playground/svelte\" \"npm run watch:dev\"",
     "angular": "ng serve demo",
     "angular:dev:ssr": "ng run demo:serve-ssr",
     "angular:serve:ssr": "node dist/demo/server/main.js",

scripts/build.js

@@ -9,13 +9,14 @@ const buildSvelte = require('./build-svelte');
 const buildStyles = require('./build-styles');
 const buildAngular = require('./build-angular');
 const outputCheckSize = require('./check-size');
+const setEnv = require('./utils/env');
 
-const env = process.env.NODE_ENV || 'development';
-const outputDir = env === 'development' ? 'build' : 'package';
 class Build {
   constructor() {
     this.argv = process.argv.slice(2).map((v) => v.toLowerCase());
     this.size = this.argv.includes('--size');
+    const { outputDir } = setEnv();
+    this.outputDir = outputDir;
     this.tasks = [];
     return this;
   }
@@ -29,7 +30,7 @@ class Build {
 
   addMultipleFormats(flag, buildFn) {
     return this.add(flag, async () =>
-      Promise.all(['esm', 'cjs'].map((format) => buildFn(format, outputDir))),
+      Promise.all(['esm', 'cjs'].map((format) => buildFn(format, this.outputDir))),
     );
   }
 
@@ -58,14 +59,15 @@ class Build {
 }
 
 (async () => {
-  await new Build()
+  const build = new Build();
+  await build
     .add('core', buildJsCore)
     .add('bundle', buildJsBundle)
     .add('types', buildTypes)
     .addMultipleFormats('react', buildReact)
     .addMultipleFormats('vue', buildVue)
     .addMultipleFormats('svelte', buildSvelte)
     .add('angular', buildAngular)
-    .add('styles', () => buildStyles(outputDir))
+    .add('styles', () => buildStyles(build.outputDir))
     .run();
 })();

scripts/playground.js

@@ -1,16 +1,15 @@
-const fs = require('fs');
+const fs = require('fs-extra');
 const path = require('path');
+const setEnv = require('./utils/env');
 
-const env = process.env.NODE_ENV || 'development';
-
-function buildPlayground() {
+(async () => {
   const filePath = path.resolve(__dirname, '../playground/core/index.html');
-  const packageFolder = env === 'development' ? '/build/' : '/package/';
-  const html = fs
-    .readFileSync(filePath, 'utf-8')
-    .replace(/\/build\//g, packageFolder)
-    .replace(/\/package\//g, packageFolder);
-  fs.writeFileSync(filePath, html);
-}
+  const { outputDir } = setEnv();
+  const packageFolder = `/${outputDir}/`;
+  const html = await fs.readFile(filePath, 'utf-8');
 
-buildPlayground();
+  await fs.writeFile(
+    filePath,
+    html.replace(/\/build\//g, packageFolder).replace(/\/package\//g, packageFolder),
+  );
+})();

scripts/utils/env.js

@@ -0,0 +1,11 @@
+module.exports = () => {
+  const argv = process.argv.slice(2).map((v) => v.toLowerCase());
+  const isProd = argv.includes('--prod');
+  process.env.NODE_ENV = isProd ? 'production' : 'development';
+  const outputDir = isProd ? 'package' : 'build';
+  return {
+    env: process.env.NODE_ENV,
+    isProd,
+    outputDir,
+  };
+};

scripts/watch.js

@@ -1,5 +1,7 @@
 const fs = require('fs');
 const path = require('path');
+const chalk = require('chalk');
+const setEnv = require('./utils/env');
 const buildJsCore = require('./build-js-core');
 const buildJsBundle = require('./build-js-bundle');
 const buildTypes = require('./build-types');
@@ -8,33 +10,50 @@ const buildReact = require('./build-react');
 const buildVue = require('./build-vue');
 const buildSvelte = require('./build-svelte');
 
-console.log('Watching file changes ...');
+console.log(chalk.cyan('Watching file changes ...'));
+
+const watchFunction = async (fileName, outputDir) => {
+  if (fileName.includes('.less') || fileName.includes('.css') || fileName.includes('.scss')) {
+    console.log('Building styles');
+    await buildStyles(outputDir);
+    console.log('Building styles DONE');
+    return;
+  }
+  if (fileName.includes('.d.ts')) {
+    console.log('Building Types');
+    await buildTypes();
+    return;
+  }
+
+  if (fileName.includes('react')) {
+    console.log('Building React');
+    buildReact('esm', 'build');
+    return;
+  }
+  if (fileName.includes('vue')) {
+    console.log('Building Vue');
+    buildVue('esm', 'build');
+    return;
+  }
+  if (fileName.includes('svelte')) {
+    console.log('Building Svelte');
+    buildSvelte('esm', 'build');
+    return;
+  }
+  if (fileName.includes('.js')) {
+    console.log('Building JS');
+    buildJsCore();
+    buildJsBundle();
+    return;
+  }
+  console.log('something wrong...');
+};
 
 let watchTimeout;
+const { outputDir } = setEnv();
 fs.watch(path.resolve(__dirname, '../src'), { recursive: true }, (eventType, fileName) => {
   clearTimeout(watchTimeout);
   watchTimeout = setTimeout(() => {
-    if (fileName.includes('.less') || fileName.includes('.css') || fileName.includes('.scss')) {
-      console.log('Building styles');
-      buildStyles(() => {
-        console.log('Building styles DONE');
-      });
-    } else if (fileName.includes('.d.ts')) {
-      console.log('Building Types');
-      buildTypes();
-    } else if (fileName.includes('react')) {
-      console.log('Building React');
-      buildReact('esm', 'build');
-    } else if (fileName.includes('vue')) {
-      console.log('Building Vue');
-      buildVue('esm', 'build');
-    } else if (fileName.includes('svelte')) {
-      console.log('Building Svelte');
-      buildSvelte('esm', 'build');
-    } else if (fileName.includes('.js')) {
-      console.log('Building JS');
-      buildJsCore();
-      buildJsBundle();
-    }
+    watchFunction(fileName, outputDir);
   }, 100);
 });