feat: parseWebpackConfig support multiple environments

originjs · Jun 25, 2021 · 4ca5e8c · 4ca5e8c
1 parent 7c7132e
commit 4ca5e8c
Show file tree

Hide file tree

Showing 14 changed files with 676 additions and 125 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -45,6 +45,8 @@
     "vite": "^2.3.7",
     "vite-plugin-env-compatible": "^1.0.0",
     "vite-plugin-vue2": "^1.6.2",
+    "vue-loader": "^15.9.7",
+    "webpack": "^5.40.0",
     "yorkie": "^2.0.0"
   },
   "dependencies": {

diff --git a/src/config/parse.ts b/src/config/parse.ts
@@ -1,14 +1,37 @@
-import fs from 'fs'
-import { WebpackConfig } from './webpack'
-import { VueCliConfig } from './vuecli'
+import fs from 'fs';
+import path from 'path';
+import { WebpackConfig } from './webpack';
+import { VueCliConfig } from './vuecli';
 
 export async function parseWebpackConfig (
   configPath: string
 ): Promise<WebpackConfig> {
+  // first of all, parse webpack config from path : ${__dirname}/webpack.config.js
   let webpackConfig: WebpackConfig = {}
-  await import(configPath).then((config) => {
+  if (fs.existsSync(configPath)) {
+    await import(configPath).then((config) => {
+      webpackConfig = config
+    });
+    return webpackConfig
+  }
+  // if webpack.config.js not exists in ${__dirname}/webpack.config.js, scan folder ${__dirname}/build/
+  const dir = path.dirname(configPath)
+  let buildDir = path.resolve(dir, 'build')
+  // if folder ${__dirname}/build/ not exists, scan folder ${__dirname}/webpack/
+  if (!fs.existsSync(buildDir)) {
+    buildDir = path.resolve(dir, 'webpack')
+  }
+  // default config files: webpack.base.js、webpack.dev.js、webpack.prod.js|webpack.build.js|webpack.production.js
+  // TODO: production config
+  const devConfigPath = path.resolve(buildDir, 'webpack.dev.js')
+  if (!fs.existsSync(devConfigPath)) {
+    console.error(`${devConfigPath} not exists`)
+    return webpackConfig
+  }
+  await import(devConfigPath).then((config) => {
     webpackConfig = config
   })
+
   return webpackConfig
 }
 

diff --git a/src/config/webpack.ts b/src/config/webpack.ts
@@ -25,7 +25,7 @@ export interface Resolve {
 
 export interface WebpackConfig extends Config {
     mode?: string;
-    entry?: string | string[];
+    entry?: string | string[] | { [entryAlias: string]: string };
     output?: Output;
     module?: Module;
     resolve?: Resolve;

diff --git a/src/transform/transformWebpack.ts b/src/transform/transformWebpack.ts
@@ -31,7 +31,7 @@ export class WebpackTransformer implements Transformer {
       config.build = {}
 
       // convert entry
-      if (webpackConfig.entry !== '' && webpackConfig.entry?.length !== 0) {
+      if (webpackConfig.entry !== '' && webpackConfig.entry !== null) {
         config.build.rollupOptions = {}
         config.build.rollupOptions.input = webpackConfig.entry
       }

diff --git a/tests/generate.test.ts b/tests/generate.test.ts
@@ -1,22 +1,22 @@
-import { genePackageJson } from "../src/generate/genePackageJson";
+import { genePackageJson } from '../src/generate/genePackageJson';
 import path from 'path';
 import fs from 'fs';
-import { genIndexHtml } from "../src/generate/geneIndexHtml";
-import { readSync } from "../src/utils/file";
+import { genIndexHtml } from '../src/generate/geneIndexHtml';
+import { readSync } from '../src/utils/file';
 import * as constants from '../src/constants/constants';
 
 test('genePackageJson', () => {
-    const packageJsonPath = path.resolve('./tests/testdata/generate/package.json');
-    genePackageJson(packageJsonPath);
-    const packageJsonContent = fs.readFileSync(packageJsonPath, 'utf-8');
-    expect(JSON.parse(packageJsonContent).devDependencies['@vue/compiler-sfc']).toEqual(constants.VUE_COMPILER_SFC_VERSION);
-    expect(JSON.parse(packageJsonContent).devDependencies['vite']).toEqual(constants.VITE_VERSION);
-    expect(JSON.parse(packageJsonContent).devDependencies['@vitejs/plugin-vue']).toEqual(constants.VITE_PLUGIN_VUE_VERSION);
+  const packageJsonPath = path.resolve('./tests/testdata/generate/package.json');
+  genePackageJson(packageJsonPath);
+  const packageJsonContent = fs.readFileSync(packageJsonPath, 'utf-8');
+  expect(JSON.parse(packageJsonContent).devDependencies['@vue/compiler-sfc']).toEqual(constants.VUE_COMPILER_SFC_VERSION);
+  expect(JSON.parse(packageJsonContent).devDependencies.vite).toEqual(constants.VITE_VERSION);
+  expect(JSON.parse(packageJsonContent).devDependencies['@vitejs/plugin-vue']).toEqual(constants.VITE_PLUGIN_VUE_VERSION);
 });
 
 test('genIndexHtml', () => {
-    genIndexHtml('./tests/out');
-    const filePath = path.resolve('./tests/out/index.html');
-    const content = readSync(filePath);
-    expect(content).toContain('src/main.js');
+  genIndexHtml('./tests/out');
+  const filePath = path.resolve('./tests/out/index.html');
+  const content = readSync(filePath);
+  expect(content).toContain('src/main.js');
 })
diff --git a/tests/parse.test.ts b/tests/parse.test.ts
@@ -1,22 +1,32 @@
-import { parseVueCliConfig, parseWebpackConfig } from "../src/config/parse";
-import { WebpackConfig } from "../src/config/webpack";
 import path from 'path';
-import { VueCliConfig } from "../src/config/vuecli";
+// import fs from 'fs';
+import { parseVueCliConfig, parseWebpackConfig } from '../src/config/parse';
+import { WebpackConfig } from '../src/config/webpack';
+import { VueCliConfig } from '../src/config/vuecli';
 
-test('parseWebpackConfig', async () => {
-    let webpackConfig: WebpackConfig = {} ;
-    const configPath = path.resolve('tests/testdata/webpack.config.js');
-    await parseWebpackConfig(configPath).then(res => {
-        webpackConfig = res ;
-    });
-    expect(webpackConfig.entry).toEqual('./main.js');
+test('parse webpack.config.js', async () => {
+  let webpackConfig: WebpackConfig = {};
+  const configPath = path.resolve('tests/testdata/webpack/webpack.config.js');
+  await parseWebpackConfig(configPath).then(res => {
+    webpackConfig = res;
+  });
+  expect(webpackConfig.entry).toEqual('./main.js');
 });
 
+test('parse build/webpack.dev.js', async () => {
+  let webpackConfig: WebpackConfig = {};
+  const filePath = path.resolve('tests/testdata/webpack/build/webpack.dev.js');
+  await parseWebpackConfig(filePath).then(res => {
+    webpackConfig = res
+  })
+  expect(webpackConfig.entry['app']).toEqual('./src/app.js');
+})
+
 test('parseVueCliConfig', async () => {
-    let vueCliConfig: VueCliConfig = {}
-    const configPath = path.resolve('tests/testdata/vue.config.js');
-    await parseVueCliConfig(configPath).then(res => {
-        vueCliConfig = res ;
-    });
-    expect(vueCliConfig.baseUrl).toEqual('/src');
+  let vueCliConfig: VueCliConfig = {}
+  const configPath = path.resolve('tests/testdata/vue.config.js');
+  await parseVueCliConfig(configPath).then(res => {
+    vueCliConfig = res;
+  });
+  expect(vueCliConfig.baseUrl).toEqual('/src');
 });
diff --git a/tests/render.test.ts b/tests/render.test.ts
@@ -3,67 +3,67 @@ import { geneViteConfig } from '../src/generate/geneViteConfig';
 import fs from 'fs';
 import { serializeObject } from '../src/generate/render';
 
-test('geneViteConfig from non exist file', async() => {
-    const outputFilePath = path.resolve('tests/out/vite.config.js');
-    const vueConfigPath = path.resolve('tests/nosuchfile');
-    await geneViteConfig(vueConfigPath, path.resolve('tests/out'));
-    const result = fs.readFileSync(outputFilePath, 'utf8');
-    expect(result).toContain('plugins');
+test('geneViteConfig from non exist file', async () => {
+  const outputFilePath = path.resolve('tests/out/vite.config.js');
+  const vueConfigPath = path.resolve('tests/nosuchfile');
+  await geneViteConfig(vueConfigPath, path.resolve('tests/out'), 'vue-cli');
+  const result = fs.readFileSync(outputFilePath, 'utf8');
+  expect(result).toContain('plugins');
 });
 
-test('geneViteConfig from vue.config.js', async() => {
-   const outputFilePath = path.resolve('tests/out/vite.config.js');
-   const vueConfigPath = path.resolve('tests/testdata');
-   await geneViteConfig(vueConfigPath, path.resolve('tests/out'));
-   const result = fs.readFileSync(outputFilePath, 'utf8');
-   expect(result).toContain('@components');
+test('geneViteConfig from vue.config.js', async () => {
+  const outputFilePath = path.resolve('tests/out/vite.config.js');
+  const vueConfigPath = path.resolve('tests/testdata');
+  await geneViteConfig(vueConfigPath, path.resolve('tests/out'), 'vue-cli');
+  const result = fs.readFileSync(outputFilePath, 'utf8');
+  expect(result).toContain('@components');
 });
 
 test('serialize string', () => {
-    const objA = {
-        key1: '\r\n \\src',
-        key2: '\'src\'',
-        key3: '"src"',
-        key4: `newline
+  const objA = {
+    key1: '\r\n \\src',
+    key2: '\'src\'',
+    key3: '"src"',
+    key4: `newline
         src`
-    }
-    const resultA = serializeObject(objA);
-    expect(resultA).toMatch('key1: \'\r\n \\src\'');
-    expect(resultA).toMatch('key2: \'\'src\'\'');
-    expect(resultA).toMatch('key3: \'"src"\'');
-    expect(resultA).toMatch('key4: \'newline\n');
+  }
+  const resultA = serializeObject(objA);
+  expect(resultA).toMatch('key1: \'\r\n \\src\'');
+  expect(resultA).toMatch('key2: \'\'src\'\'');
+  expect(resultA).toMatch('key3: \'"src"\'');
+  expect(resultA).toMatch('key4: \'newline\n');
 });
 
 test('serializeObject', () => {
-    const abbreviatedKey = 'abbreviatedKey'
-    const objA = {
-        key1: undefined,
-        key2: null,
-        key3: false,
-        key4: 0,
-        key5: '0',
-        abbreviatedKey
-    }
-    const resultA = serializeObject(objA);
-    expect(resultA).not.toMatch('key1: undefined');
-    expect(resultA).not.toMatch('key2: null');
-    expect(resultA).toMatch('key3: false');
-    expect(resultA).toMatch('key4: 0');
-    expect(resultA).toMatch('key5: \'0\'');
-    expect(resultA).toMatch('abbreviatedKey: \'abbreviatedKey\'');
+  const abbreviatedKey = 'abbreviatedKey'
+  const objA = {
+    key1: undefined,
+    key2: null,
+    key3: false,
+    key4: 0,
+    key5: '0',
+    abbreviatedKey
+  }
+  const resultA = serializeObject(objA);
+  expect(resultA).not.toMatch('key1: undefined');
+  expect(resultA).not.toMatch('key2: null');
+  expect(resultA).toMatch('key3: false');
+  expect(resultA).toMatch('key4: 0');
+  expect(resultA).toMatch('key5: \'0\'');
+  expect(resultA).toMatch('abbreviatedKey: \'abbreviatedKey\'');
 
-    const objB = {
-        key1: {
-            key1: undefined,
-            key2: null,
-            key3: false,
-            key4: 0,
-            key5: '0',
-            abbreviatedKey
-        }
+  const objB = {
+    key1: {
+      key1: undefined,
+      key2: null,
+      key3: false,
+      key4: 0,
+      key5: '0',
+      abbreviatedKey
     }
-    const resultB = serializeObject(objB);
-    expect(resultB).toMatch('{\n' +
+  }
+  const resultB = serializeObject(objB);
+  expect(resultB).toMatch('{\n' +
         '    key1: {\n' +
         '        key3: false,\n' +
         '        key4: 0,\n' +
@@ -72,32 +72,32 @@ test('serializeObject', () => {
         '    }\n' +
         '}');
 
-    const objC = {
-        key1: [
-            undefined,
-            null,
-            false,
-            0,
-            '0'
-        ]
-    }
-    const resultC = serializeObject(objC);
-    expect(resultC).toMatch('{\n' +
+  const objC = {
+    key1: [
+      undefined,
+      null,
+      false,
+      0,
+      '0'
+    ]
+  }
+  const resultC = serializeObject(objC);
+  expect(resultC).toMatch('{\n' +
         '    key1: [\n' +
         '        false,\n' +
         '        0,\n' +
         '        \'0\'\n' +
         '    ]\n' +
         '}'
-    );
+  );
 
-    const objD = {
-        key1: [
-            objA
-        ]
-    }
-    const resultD = serializeObject(objD);
-    expect(resultD).toMatch('{\n' +
+  const objD = {
+    key1: [
+      objA
+    ]
+  }
+  const resultD = serializeObject(objD);
+  expect(resultD).toMatch('{\n' +
         '    key1: [\n' +
         '        {\n' +
         '            key3: false,\n' +
@@ -107,19 +107,19 @@ test('serializeObject', () => {
         '        }\n' +
         '    ]\n' +
         '}'
-    );
+  );
 
-    const objE = {
-        key3: function() { console.log('anonymous function') },
-        key4: function() { console.log('anonymous function2') },
-        key5: () => { console.log('arrow function') },
-        key6: () => { console.log('arrow function') },
-        key7() { console.log('abbreviated function') },
-        key8() { console.log('abbreviated function') },
-        key9() { /* key9 */ console.log('abbreviated function') }
-    }
-    const resultE = serializeObject(objE);
-    expect(resultE).toMatch('{\n' +
+  const objE = {
+    key3: function () { console.log('anonymous function') },
+    key4: function () { console.log('anonymous function2') },
+    key5: () => { console.log('arrow function') },
+    key6: () => { console.log('arrow function') },
+    key7 () { console.log('abbreviated function') },
+    key8 () { console.log('abbreviated function') },
+    key9 () { /* key9 */ console.log('abbreviated function') }
+  }
+  const resultE = serializeObject(objE);
+  expect(resultE).toMatch('{\n' +
         '    key3: function () { console.log(\'anonymous function\'); },\n' +
         '    key4: function () { console.log(\'anonymous function2\'); },\n' +
         '    key5: () => { console.log(\'arrow function\'); },\n' +

diff --git a/tests/testdata/generate/package.json b/tests/testdata/generate/package.json
@@ -7,7 +7,7 @@
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint",
     "serve-vite": "vite",
-    "build-vite": "build vite"
+    "build-vite": "vite build"
   },
   "dependencies": {
     "core-js": "^3.6.5",
@@ -24,7 +24,8 @@
     "@vitejs/plugin-vue": "^1.2.1",
     "vite-plugin-env-compatible": "^1.0.0",
     "vite": "^2.1.5",
-    "@vitejs/plugin-vue-jsx": "^1.1.5"
+    "@vitejs/plugin-vue-jsx": "^1.1.5",
+    "@originjs/vite-plugin-commonjs": "^1.0.0-beta3"
   },
   "eslintConfig": {
     "root": true,

diff --git a/tests/testdata/vue.config.js b/tests/testdata/vue.config.js
@@ -1,6 +1,6 @@
 const path = require('path')
 
-function resolve(dir) {
+function resolve (dir) {
   return path.join(__dirname, dir)
 }
 

diff --git a/tests/testdata/webpack.config.js b/tests/testdata/webpack.config.js