npm scripts to pack an extension (#35)

* add script to automatically generate zip file

* fix wrong path

* add missing file extension

* rename JS script. separate npm script

* fix using wrong path for manifest

* Use base instead of name of parsed path

* Pack a file into release directory

* Print success message

* Substitute string literals with variables

* Update README

* Update README.md

* Create release folder if not exist

* Remove chalk dependency

* Show error message when failed to generate zip file

---------

Co-authored-by: Seokseong Jeon <seokseong@jeon.engineer>

README.md

@@ -27,7 +27,8 @@ Then follow these instructions to see your extension:
 3. Click on the **Load unpacked extension** button
 4. Select the folder **my-extension/build**
 
-When you're ready to publish to Chrome Web Store, create a minified bundle with `npm run build` and then zip the `build` folder.
+When you're ready to publish to Chrome Web Store, create a minified bundle with `npm run build` and zip it with `npm run pack`.
+Or you can zip the `build` folder manually.
 
 <div align="center">
   <img width="600" height="413" src="assets/installation.png" alt="Chrome Extension CLI">
@@ -106,7 +107,18 @@ Then follow these instructions to see your app:
 ### `npm run build`
 
 Builds the app for production to the build folder.<br>
-Zip the build folder and your app is ready to be published on Chrome Web Store.
+Run `npm run pack` to
+zip the build folder and your app is ready to be published on Chrome Web Store.<br>
+Or you can zip it manually.
+
+### `npm run pack`
+
+Packs the build folder into a zip file under release folder.
+
+### `npm run repack`
+
+Rebuilds and packs the app into a zip file.
+It is a shorthand for `npm run build && npm run pack`.
 
 ### `npm run format`
 

index.js

@@ -186,6 +186,8 @@ function createExtension(name, { overridePage, devtools, language }) {
     watch:
       'webpack --mode=development --watch --config config/webpack.config.js',
     build: 'webpack --mode=production --config config/webpack.config.js',
+    pack: 'node pack.js',
+    repack: 'npm run build && npm run pack',
     format:
       'prettier --write --ignore-unknown "{config,public,src}/**/*.{html,css,js,ts,json}"',
   };
@@ -216,7 +218,8 @@ function createExtension(name, { overridePage, devtools, language }) {
     'mini-css-extract-plugin@^2.6.0',
     'css-loader@^6.7.1',
     'file-loader@^6.2.0',
-    'prettier@^2.6.2'
+    'prettier@^2.6.2',
+    'adm-zip@^0.5.10'
   );
 
   if (languageName === 'typescript') {
@@ -288,6 +291,12 @@ function createExtension(name, { overridePage, devtools, language }) {
     );
   });
 
+  // Copy script to automatically generate zip file
+  fs.copyFileSync(
+    path.resolve(__dirname, 'templates', 'shared', 'pack.js'),
+    path.join(root, 'pack.js')
+  );
+
   // Setup the manifest file
   const manifestDetails = Object.assign(
     {},

templates/shared/dotfiles/gitignore

@@ -10,3 +10,6 @@
 .DS_Store
 
 npm-debug.log*
+
+# packed files
+/release

templates/shared/pack.js

@@ -0,0 +1,25 @@
+const { readFileSync, existsSync, mkdirSync } = require('fs');
+const { parse, resolve } = require('path');
+const AdmZip = require('adm-zip');
+
+try {
+  const { base } = parse(__dirname);
+  const { version } = JSON.parse(
+    readFileSync(resolve(__dirname, 'build', 'manifest.json'), 'utf8')
+  );
+
+  const outdir = 'release';
+  const filename = `${base}-v${version}.zip`;
+  const zip = new AdmZip();
+  zip.addLocalFolder('build');
+  if (!existsSync(outdir)) {
+    mkdirSync(outdir);
+  }
+  zip.writeZip(`${outdir}/${filename}`);
+
+  console.log(
+    `Success! Created a ${filename} file under ${outdir} directory. You can upload this file to web store.`
+  );
+} catch (e) {
+  console.error('Error! Failed to generate a zip file.');
+}