Switch to ESM module

baseflask/refresh-varsnap.js

@@ -1,7 +1,7 @@
-require('dotenv').config();
+import 'dotenv/config';
 
-const calculateFibonacci = require('../static/js/fibonacci');
-const thirdParty = require('../static/js/thirdparty');
+import calculateFibonacci from '../static/js/fibonacci.js';
+import thirdParty from '../static/js/thirdparty.js';
 
 process.env.ENV='production';
 

package.json

@@ -1,5 +1,6 @@
 {
   "name": "base-flask",
+  "type": "module",
   "scripts": {
     "eslint": "eslint .",
     "stylelint": "stylelint static/css/*",

static/js/fibonacci.js

@@ -1,7 +1,7 @@
-const varsnap = require('varsnap');
+import varsnap from 'varsnap';
 
 // Function for calculating fibonacci numbers
-var calculateFibonacci = varsnap(function calculateFibonacci(index) {
+const calculateFibonacci = varsnap(function calculateFibonacci(index) {
   if (index <= 0) {
     return 0;
   }
@@ -11,4 +11,4 @@ var calculateFibonacci = varsnap(function calculateFibonacci(index) {
   return calculateFibonacci(index - 1) + calculateFibonacci(index - 2);
 });
 
-module.exports = calculateFibonacci;
+export default calculateFibonacci;

static/js/global.js

@@ -1,3 +1 @@
-if (typeof window !== 'undefined') {
-  require('../css/global.css');
-}
+import '../css/global.css';

static/js/index.js

@@ -1,10 +1,10 @@
-var thirdParty = require('./thirdparty.js');
-thirdParty.setupRollbar();
-thirdParty.setupLogfit();
-thirdParty.setupVarsnap();
-thirdParty.setupGoogleAnalytics();
-require('./global.js');
+import { setupRollbar, setupLogfit, setupVarsnap, setupGoogleAnalytics } from './thirdparty.js';
+setupRollbar();
+setupLogfit();
+setupVarsnap();
+setupGoogleAnalytics();
+import './global.js';
 
-var calculateFibonacci = require('./fibonacci.js');
+import calculateFibonacci from './fibonacci.js';
 var random = Math.floor(Math.random() * 20);
 console.log(calculateFibonacci(random));

static/js/test/index.js

@@ -1,4 +1,4 @@
-const thirdparty = require('../thirdparty');
-thirdparty.setupVarsnap();
+import { setupVarsnap } from '../thirdparty.js';
+setupVarsnap();
 
-require('./test');
+import './test.js';

static/js/test/test.js

@@ -1,7 +1,9 @@
-const expect = require('chai').expect;
-const varsnap = require('varsnap');
+import { expect } from 'chai';
 
-require('../fibonacci');
+import { setupVarsnap } from '../thirdparty.js';
+setupVarsnap();
+import varsnap from 'varsnap';
+import '../fibonacci.js';
 
 context('Varsnap', function() {
   this.timeout(30 * 1000);

static/js/thirdparty.js

@@ -1,14 +1,12 @@
-const LogFit = require('logfit');
-const Rollbar = require('rollbar');
-const varsnap = require('varsnap');
+import LogFit from 'logfit';
+import Rollbar from 'rollbar';
+import varsnap from 'varsnap';
 
-if (typeof window !== 'undefined') {
-  require('normalize.css/normalize.css');
-  require('bootstrap/dist/css/bootstrap.css');
-  require('bootstrap/dist/js/bootstrap.js');
-}
+import 'normalize.css/normalize.css';
+import 'bootstrap/dist/css/bootstrap.css';
+import 'bootstrap/dist/js/bootstrap.js';
 
-function setupRollbar() {
+export function setupRollbar() {
   const rollbarConfig = {
     accessToken: process.env.ROLLBAR_CLIENT_TOKEN,
     captureUncaught: true,
@@ -19,14 +17,14 @@ function setupRollbar() {
   return Rollbar.init(rollbarConfig);
 }
 
-function setupLogfit() {
+export function setupLogfit() {
   const logfit = new LogFit({
     source: process.env.LOGFIT_CLIENT_TOKEN,
   });
   logfit.report();
 }
 
-function setupVarsnap() {
+export function setupVarsnap() {
   varsnap.updateConfig({
     varsnap: 'true',
     env: process.env.ENV,
@@ -35,7 +33,7 @@ function setupVarsnap() {
   });
 }
 
-function setupGoogleAnalytics() {
+export function setupGoogleAnalytics() {
   const script = document.createElement('script');
   script.onload = function () {
     window.dataLayer = window.dataLayer || [];
@@ -46,10 +44,3 @@ function setupGoogleAnalytics() {
   script.src = 'https://www.googletagmanager.com/gtag/js?id=' + process.env.GOOGLE_ANALYTICS_TOKEN;
   document.head.appendChild(script);
 }
-
-module.exports = {
-  setupRollbar: setupRollbar,
-  setupLogfit: setupLogfit,
-  setupVarsnap: setupVarsnap,
-  setupGoogleAnalytics: setupGoogleAnalytics,
-};

wdio.conf.js

@@ -1,4 +1,4 @@
-exports.config = {
+export const config = {
   //
   // ====================
   // Runner Configuration

webpack.config.js

@@ -1,15 +1,15 @@
-const path = require('path');
+import path from 'path';
 
-const Dotenv = require('dotenv-webpack');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
+import Dotenv from 'dotenv-webpack';
+import MiniCssExtractPlugin from'mini-css-extract-plugin';
+import CssMinimizerPlugin from 'css-minimizer-webpack-plugin';
 
 const isProduction = process.env.NODE_ENV == 'production';
 
 const config = {
   entry: './static/js/index.js',
   output: {
-    path: path.resolve(__dirname, 'static', 'gen'),
+    path: path.resolve('static', 'gen'),
   },
   devtool: 'inline-source-map',
   plugins: [
@@ -36,7 +36,7 @@ const config = {
   },
 };
 
-module.exports = () => {
+export default () => {
   if (isProduction) {
     config.mode = 'production';
   } else {