Allow webpack to omit development only dependencies properly (#2828)

_scripts/webpack.renderer.config.js

@@ -156,12 +156,6 @@ if (!isDevMode) {
     processLocalesPlugin,
     new webpack.DefinePlugin({
       'process.env.LOCALE_NAMES': JSON.stringify(processLocalesPlugin.localeNames)
-    }),
-    // webpack doesn't get rid of js-yaml even though it isn't used in the production builds
-    // so we need to manually tell it to ignore any imports for `js-yaml`
-    new webpack.IgnorePlugin({
-      resourceRegExp: /^js-yaml$/,
-      contextRegExp: /i18n$/
     })
   )
 }

_scripts/webpack.web.config.js

@@ -189,12 +189,6 @@ config.plugins.push(
           },
         },
     ]
-  }),
-  // webpack doesn't get rid of js-yaml even though it isn't used in the production builds
-  // so we need to manually tell it to ignore any imports for `js-yaml`
-  new webpack.IgnorePlugin({
-    resourceRegExp: /^js-yaml$/,
-    contextRegExp: /i18n$/
   })
 )
 

src/main/index.js

@@ -41,7 +41,6 @@ function runApp() {
 
   // disable electron warning
   process.env.ELECTRON_DISABLE_SECURITY_WARNINGS = 'true'
-  const isDev = process.env.NODE_ENV === 'development'
   const isDebug = process.argv.includes('--debug')
 
   let mainWindow
@@ -67,7 +66,7 @@ function runApp() {
   app.removeAsDefaultProtocolClient('freetube')
 
   // If we are running a non-packaged version of the app && on windows
-  if (isDev && process.platform === 'win32') {
+  if (process.env.NODE_ENV === 'development' && process.platform === 'win32') {
     // Set the path of electron.exe and your app.
     // These two additional parameters are only available on windows.
     app.setAsDefaultProtocolClient('freetube', process.execPath, [path.resolve(process.argv[1])])
@@ -75,7 +74,7 @@ function runApp() {
     app.setAsDefaultProtocolClient('freetube')
   }
 
-  if (!isDev) {
+  if (process.env.NODE_ENV !== 'development') {
     // Only allow single instance of the application
     const gotTheLock = app.requestSingleInstanceLock()
     if (!gotTheLock) {
@@ -271,7 +270,7 @@ function runApp() {
 
     await createWindow()
 
-    if (isDev) {
+    if (process.env.NODE_ENV === 'development') {
       installDevTools()
     }
 
@@ -326,7 +325,7 @@ function runApp() {
     const commonBrowserWindowOptions = {
       backgroundColor: windowBackground,
       darkTheme: nativeTheme.shouldUseDarkColors,
-      icon: isDev
+      icon: process.env.NODE_ENV === 'development'
         ? path.join(__dirname, '../../_icons/iconColor.png')
         /* eslint-disable-next-line */
         : `${__dirname}/_icons/iconColor.png`,
@@ -409,7 +408,7 @@ function runApp() {
     }
 
     // load root file/url
-    if (isDev) {
+    if (process.env.NODE_ENV === 'development') {
       let devStartupURL = 'http://localhost:9080'
       if (windowStartupUrl != null) {
         devStartupURL = windowStartupUrl
@@ -434,7 +433,7 @@ function runApp() {
     newWindow.once('ready-to-show', () => {
       if (newWindow.isVisible()) {
         // only open the dev tools if they aren't already open
-        if (isDev && !newWindow.webContents.isDevToolsOpened()) {
+        if (process.env.NODE_ENV === 'development' && !newWindow.webContents.isDevToolsOpened()) {
           newWindow.webContents.openDevTools({ activate: false })
         }
         return
@@ -443,7 +442,7 @@ function runApp() {
       newWindow.show()
       newWindow.focus()
 
-      if (isDev) {
+      if (process.env.NODE_ENV === 'development') {
         newWindow.webContents.openDevTools({ activate: false })
       }
     })
@@ -479,7 +478,7 @@ function runApp() {
   })
 
   ipcMain.once('relaunchRequest', () => {
-    if (isDev) {
+    if (process.env.NODE_ENV === 'development') {
       app.exit(parseInt(process.env.FREETUBE_RELAUNCH_EXIT_CODE))
       return
     }

src/renderer/i18n/index.js

@@ -5,11 +5,9 @@ import { createWebURL } from '../helpers/utils'
 // List of locales approved for use
 import activeLocales from '../../../static/locales/activeLocales.json'
 
-const isDev = process.env.NODE_ENV === 'development'
-
 const messages = {}
 
-if (isDev && process.env.IS_ELECTRON) {
+if (process.env.NODE_ENV === 'development' && process.env.IS_ELECTRON) {
   const { load } = require('js-yaml')
 
   // Take active locales and load respective YAML file
@@ -32,7 +30,7 @@ class CustomVueI18n extends VueI18n {
 
   async loadLocale(locale) {
     // we don't lazy load locales in development in electron
-    if (isDev && process.env.IS_ELECTRON) { return }
+    if (process.env.NODE_ENV === 'development' && process.env.IS_ELECTRON) { return }
     // don't need to load it if it's already loaded
     if (this.availableLocales.includes(locale)) {
       return
@@ -71,7 +69,7 @@ const i18n = new CustomVueI18n({
   messages
 })
 
-if (!isDev || !process.env.IS_ELECTRON) {
+if (process.env.NODE_ENV !== 'development' || !process.env.IS_ELECTRON) {
   i18n.loadLocale('en-US')
 }
 

src/renderer/main.js

@@ -61,11 +61,9 @@ import { faMonero } from '@fortawesome/free-brands-svg-icons/faMonero'
 import { faMastodon } from '@fortawesome/free-brands-svg-icons/faMastodon'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 
-const isDev = process.env.NODE_ENV === 'development'
-
-Vue.config.devtools = isDev
-Vue.config.performance = isDev
-Vue.config.productionTip = isDev
+Vue.config.devtools = process.env.NODE_ENV === 'development'
+Vue.config.performance = process.env.NODE_ENV === 'development'
+Vue.config.productionTip = process.env.NODE_ENV === 'development'
 
 library.add(
   // solid icons

src/renderer/views/Watch/Watch.js

@@ -20,8 +20,6 @@ import {
   showToast
 } from '../../helpers/utils'
 
-const isDev = process.env.NODE_ENV === 'development'
-
 export default Vue.extend({
   name: 'Watch',
   components: {
@@ -1199,7 +1197,7 @@ export default Vue.extend({
 
       if (this.removeVideoMetaFiles) {
         const userData = await this.getUserDataPath()
-        if (isDev) {
+        if (process.env.NODE_ENV === 'development') {
           const dashFileLocation = `static/dashFiles/${videoId}.xml`
           const vttFileLocation = `static/storyboards/${videoId}.vtt`
           // only delete the file it actually exists
@@ -1246,7 +1244,7 @@ export default Vue.extend({
       const userData = await this.getUserDataPath()
       let fileLocation
       let uriSchema
-      if (isDev) {
+      if (process.env.NODE_ENV === 'development') {
         fileLocation = `static/dashFiles/${this.videoId}.xml`
         uriSchema = `dashFiles/${this.videoId}.xml`
         // if the location does not exist, writeFileSync will not create the directory, so we have to do that manually
@@ -1327,7 +1325,7 @@ export default Vue.extend({
 
         // Dev mode doesn't have access to the file:// schema, so we access
         // storyboards differently when run in dev
-        if (isDev) {
+        if (process.env.NODE_ENV === 'development') {
           fileLocation = `static/storyboards/${this.videoId}.vtt`
           uriSchema = `storyboards/${this.videoId}.vtt`
           // if the location does not exist, writeFileSync will not create the directory, so we have to do that manually