feat(core): remove CJS formats

nolimits4web · Aug 3, 2021 · 3978367 · 3978367
1 parent 91e8ea1
commit 3978367
Show file tree

Hide file tree

Showing 10 changed files with 56 additions and 101 deletions.
diff --git a/babel.config.js b/babel.config.js
@@ -1,6 +1,3 @@
-let modules = process.env.MODULES || false;
-if (modules === 'esm' || modules === 'false') modules = false;
-
 module.exports = {
-  presets: [['@babel/preset-env', { modules, loose: true }]],
+  presets: [['@babel/preset-env', { modules: false, loose: true }]],
 };
diff --git a/babel.config.react.js b/babel.config.react.js
@@ -1,6 +1,3 @@
-let modules = process.env.MODULES || false;
-if (modules === 'esm' || modules === 'false') modules = false;
-
 module.exports = {
-  presets: ['@babel/preset-react', ['@babel/preset-env', { modules, loose: true }]],
+  presets: ['@babel/preset-react', ['@babel/preset-env', { modules: false, loose: true }]],
 };
diff --git a/babel.config.svelte.js b/babel.config.svelte.js
@@ -1,6 +1,3 @@
-let modules = process.env.MODULES || false;
-if (modules === 'esm' || modules === 'false') modules = false;
-
 module.exports = {
-  presets: [['@babel/preset-env', { modules, loose: true }]],
+  presets: [['@babel/preset-env', { modules: false, loose: true }]],
 };
diff --git a/babel.config.vue.js b/babel.config.vue.js
@@ -1,6 +1,3 @@
-let modules = process.env.MODULES || false;
-if (modules === 'esm' || modules === 'false') modules = false;
-
 module.exports = {
-  presets: [['@babel/preset-env', { modules, loose: true }]],
+  presets: [['@babel/preset-env', { modules: false, loose: true }]],
 };
diff --git a/scripts/build-js-bundle.js b/scripts/build-js-bundle.js
@@ -56,7 +56,7 @@ async function buildBundle(components, format, browser, cb) {
       }),
     )
     .then(async (bundle) => {
-      if (!browser && (format === 'cjs' || format === 'esm')) {
+      if (!browser && format === 'esm') {
         // Fix imports
         const modularContent = fs
           .readFileSync(`./${output}/${filename}.js`, 'utf-8')
@@ -124,7 +124,6 @@ async function build() {
     buildBundle(components, 'esm', false, () => {}),
     buildBundle(components, 'esm', true, () => {}),
     buildBundle(components, 'umd', true, () => {}),
-    buildBundle(components, 'cjs', false, () => {}),
   ]);
 }
 

diff --git a/scripts/build-js-core.js b/scripts/build-js-core.js
@@ -6,31 +6,18 @@ const fs = require('fs');
 const config = require('./build-config');
 const banner = require('./banner')();
 
-async function buildCore(components, format) {
+async function buildCore(components) {
   const env = process.env.NODE_ENV || 'development';
-  const filename = `swiper.${format}`;
+  const filename = `swiper.esm`;
   const outputDir = env === 'development' ? 'build' : 'package';
   let coreContent = '';
-  if (format === 'esm') {
-    coreContent += `export { default as Swiper, default } from './components/core/core-class';\n`;
-    coreContent += components
-      .map(
-        (component) =>
-          `export { default as ${component.capitalized} } from './components/${component.name}/${component.name}';`,
-      )
-      .join('\n');
-  } else if (format === 'cjs') {
-    coreContent += `"use strict";\n`;
-    coreContent += `exports.__esModule = true;\n`;
-    coreContent += `exports.default = require('./components/core/core-class').default;\n`;
-    coreContent += `exports.Swiper = require('./components/core/core-class').default;\n`;
-    coreContent += components
-      .map(
-        (component) =>
-          `exports.${component.capitalized} = require('./components/${component.name}/${component.name}').default;`,
-      )
-      .join('\n');
-  }
+  coreContent += `export { default as Swiper, default } from './components/core/core-class';\n`;
+  coreContent += components
+    .map(
+      (component) =>
+        `export { default as ${component.capitalized} } from './components/${component.name}/${component.name}';`,
+    )
+    .join('\n');
 
   coreContent = `${banner}\n${coreContent}`;
 
@@ -49,26 +36,24 @@ async function buildCore(components, format) {
     '"src/swiper-svelte.js"',
   ];
   await exec.promise(
-    `npx cross-env MODULES=${format} npx babel src --out-dir ${outputDir}/${format} --ignore ${ignore.join(
-      ',',
-    )}`,
+    `npx cross-env npx babel src --out-dir ${outputDir}/esm --ignore ${ignore.join(',')}`,
   );
 
   // Remove unused dirs
   const dirsToRemove = ['less'];
   const filesToRemove = ['swiper.js'];
   dirsToRemove.forEach((dir) => {
-    fs.rmdirSync(`./${outputDir}/${format}/${dir}`, { recursive: true });
+    fs.rmdirSync(`./${outputDir}/esm/${dir}`, { recursive: true });
   });
   filesToRemove.forEach((file) => {
-    fs.unlinkSync(`./${outputDir}/${format}/${file}`);
+    fs.unlinkSync(`./${outputDir}/esm/${file}`);
   });
 
   // Fix import paths
   let fileContent = fs.readFileSync(`./${outputDir}/${filename}.js`, 'utf-8');
   fileContent = fileContent
-    .replace(/require\('\.\//g, `require('./${format}/`)
-    .replace(/from '\.\//g, `from './${format}/`);
+    .replace(/require\('\.\//g, `require('./esm/`)
+    .replace(/from '\.\//g, `from './esm/`);
   fs.writeFileSync(`./${outputDir}/${filename}.js`, fileContent);
 }
 
@@ -96,7 +81,7 @@ async function build() {
     }
   });
 
-  await Promise.all([buildCore(components, 'esm'), buildCore(components, 'cjs')]);
+  await buildCore(components, 'esm');
 
   // build components
   components.forEach(({ name }) => {

diff --git a/scripts/build-react.js b/scripts/build-react.js
@@ -4,20 +4,20 @@ const { promise: exec } = require('exec-sh');
 const fs = require('fs-extra');
 const bannerReact = require('./banner')('React');
 
-module.exports = async (format, outputDir) => {
+module.exports = async (outputDir) => {
   // Babel
   await exec(
-    `cross-env MODULES=${format} npx babel --config-file ./babel.config.react.js src/react --out-dir ${outputDir}/${format}/react`,
+    `cross-env npx babel --config-file ./babel.config.react.js src/react --out-dir ${outputDir}/esm/react`,
   );
   await exec(
-    `cross-env MODULES=${format} npx babel --config-file ./babel.config.react.js src/swiper-react.js --out-file ${outputDir}/swiper-react.${format}.js`,
+    `cross-env npx babel --config-file ./babel.config.react.js src/swiper-react.js --out-file ${outputDir}/swiper-react.esm.js`,
   );
 
   // Fix import paths
-  let fileContent = await fs.readFile(`./${outputDir}/swiper-react.${format}.js`, 'utf-8');
+  let fileContent = await fs.readFile(`./${outputDir}/swiper-react.esm.js`, 'utf-8');
   fileContent = fileContent
-    .replace(/require\(".\/react\//g, `require("./${format}/react/`)
-    .replace(/from '.\/react\//g, `from './${format}/react/`);
+    .replace(/require\(".\/react\//g, `require("./esm/react/`)
+    .replace(/from '.\/react\//g, `from './esm/react/`);
   fileContent = `${bannerReact}\n${fileContent}`;
-  await fs.writeFile(`./${outputDir}/swiper-react.${format}.js`, fileContent);
+  await fs.writeFile(`./${outputDir}/swiper-react.esm.js`, fileContent);
 };
diff --git a/scripts/build-svelte.js b/scripts/build-svelte.js
@@ -5,54 +5,43 @@ const fs = require('fs-extra');
 const svelte = require('svelte/compiler');
 const bannerSvelte = require('./banner')('Svelte');
 
-module.exports = async (format, outputDir) => {
+module.exports = async (outputDir) => {
   // Babel
   await exec.promise(
-    `cross-env MODULES=${format} npx babel --config-file ./babel.config.svelte.js src/svelte --out-dir ${outputDir}/${format}/svelte`,
+    `cross-env npx babel --config-file ./babel.config.svelte.js src/svelte --out-dir ${outputDir}/esm/svelte`,
+  );
+  await exec.promise(
+    `cross-env npx babel --config-file ./babel.config.svelte.js src/swiper-svelte.js --out-file ${outputDir}/swiper-svelte.esm.js`,
   );
-  if (format === 'esm') {
-    await exec.promise(
-      `cross-env MODULES=${format} npx babel --config-file ./babel.config.svelte.js src/swiper-svelte.js --out-file ${outputDir}/swiper-svelte.${format}.js`,
-    );
 
-    // Fix import paths
-    let fileContent = await fs.readFile(`./${outputDir}/swiper-svelte.${format}.js`, 'utf-8');
-    fileContent = fileContent
-      .replace(/require\(".\/svelte\//g, `require("./${format}/svelte/`)
-      .replace(/from '.\/svelte\//g, `from './${format}/svelte/`);
-    fileContent = `${bannerSvelte}\n${fileContent}`;
-    fs.writeFileSync(`./${outputDir}/swiper-svelte.${format}.js`, fileContent);
-  } else {
-    const fileContent = [
-      bannerSvelte,
-      '"use strict";',
-      'exports.__esModule = true;',
-      'exports.Swiper = require("./cjs/svelte/swiper").default;',
-      'exports.SwiperSlide = require("./cjs/svelte/swiper-slide").default;',
-    ].join('\n');
-    fs.writeFileSync(`./${outputDir}/swiper-svelte.${format}.js`, fileContent);
-  }
+  // Fix import paths
+  let fileContent = await fs.readFile(`./${outputDir}/swiper-svelte.esm.js`, 'utf-8');
+  fileContent = fileContent
+    .replace(/require\(".\/svelte\//g, `require("./esm/svelte/`)
+    .replace(/from '.\/svelte\//g, `from './esm/svelte/`);
+  fileContent = `${bannerSvelte}\n${fileContent}`;
+  fs.writeFileSync(`./${outputDir}/swiper-svelte.esm.js`, fileContent);
 
   // Transform svelte files
   let swiper = await fs.readFile('./src/svelte/swiper.svelte', 'utf8');
   const swiperResult = svelte.compile(swiper, {
-    format,
+    format: 'esm',
     filename: 'swiper.svelte',
   });
   swiper = swiperResult.js.code;
-  await fs.writeFile(`./${outputDir}/${format}/svelte/swiper.js`, swiper);
+  await fs.writeFile(`./${outputDir}/esm/svelte/swiper.js`, swiper);
 
   let swiperSlide = await fs.readFile('./src/svelte/swiper-slide.svelte', 'utf8');
   const swiperSlideResult = svelte.compile(swiperSlide, {
-    format,
+    format: 'esm',
     filename: 'swiper.svelte',
   });
   swiperSlide = swiperSlideResult.js.code;
-  await fs.writeFile(`./${outputDir}/${format}/svelte/swiper-slide.js`, swiperSlide);
-  await fs.copyFile('./src/svelte/swiper.svelte', `./${outputDir}/${format}/svelte/swiper.svelte`);
+  await fs.writeFile(`./${outputDir}/esm/svelte/swiper-slide.js`, swiperSlide);
+  await fs.copyFile('./src/svelte/swiper.svelte', `./${outputDir}/esm/svelte/swiper.svelte`);
   await fs.copyFile(
     './src/svelte/swiper-slide.svelte',
-    `./${outputDir}/${format}/svelte/swiper-slide.svelte`,
+    `./${outputDir}/esm/svelte/swiper-slide.svelte`,
   );
   try {
     await fs.remove(`./${outputDir}/svelte/swiper-slide.svelte`);

diff --git a/scripts/build-vue.js b/scripts/build-vue.js
@@ -4,20 +4,20 @@ const { promise: exec } = require('exec-sh');
 const fs = require('fs-extra');
 const bannerVue = require('./banner')('Vue');
 
-module.exports = async (format, outputDir) => {
+module.exports = async (outputDir) => {
   // Babel
   await exec(
-    `cross-env MODULES=${format} npx babel --config-file ./babel.config.vue.js src/vue --out-dir ${outputDir}/${format}/vue`,
+    `cross-env npx babel --config-file ./babel.config.vue.js src/vue --out-dir ${outputDir}/esm/vue`,
   );
   await exec(
-    `cross-env MODULES=${format} npx babel --config-file ./babel.config.vue.js src/swiper-vue.js --out-file ${outputDir}/swiper-vue.${format}.js`,
+    `cross-env npx babel --config-file ./babel.config.vue.js src/swiper-vue.js --out-file ${outputDir}/swiper-vue.esm.js`,
   );
 
   // Fix import paths
-  let fileContent = await fs.readFile(`./${outputDir}/swiper-vue.${format}.js`, 'utf-8');
+  let fileContent = await fs.readFile(`./${outputDir}/swiper-vue.esm.js`, 'utf-8');
   fileContent = fileContent
-    .replace(/require\(".\/vue\//g, `require("./${format}/vue/`)
-    .replace(/from '.\/vue\//g, `from './${format}/vue/`);
+    .replace(/require\(".\/vue\//g, `require("./esm/vue/`)
+    .replace(/from '.\/vue\//g, `from './esm/vue/`);
   fileContent = `${bannerVue}\n${fileContent}`;
-  await fs.writeFile(`./${outputDir}/swiper-vue.${format}.js`, fileContent);
+  await fs.writeFile(`./${outputDir}/swiper-vue.esm.js`, fileContent);
 };
diff --git a/scripts/build.js b/scripts/build.js
@@ -23,17 +23,11 @@ class Build {
 
   add(flag, buildFn) {
     if (!this.argv.includes('--only') || this.argv.includes(flag)) {
-      this.tasks.push(buildFn);
+      this.tasks.push(() => buildFn(this.outputDir));
     }
     return this;
   }
 
-  addMultipleFormats(flag, buildFn) {
-    return this.add(flag, async () =>
-      Promise.all(['esm', 'cjs'].map((format) => buildFn(format, this.outputDir))),
-    );
-  }
-
   async run() {
     let start;
     let end;
@@ -64,9 +58,9 @@ class Build {
     .add('core', buildJsCore)
     .add('bundle', buildJsBundle)
     .add('types', buildTypes)
-    .addMultipleFormats('react', buildReact)
-    .addMultipleFormats('vue', buildVue)
-    .addMultipleFormats('svelte', buildSvelte)
+    .add('react', buildReact)
+    .add('vue', buildVue)
+    .add('svelte', buildSvelte)
     .add('angular', buildAngular)
     .add('styles', () => buildStyles(build.outputDir))
     .run();