Merge pull request #619 from alphagov/add-webpack-as-js-bundler

Add Webpack as js bundler

CHANGELOG.md

@@ -55,7 +55,8 @@ New features:
 - Add basic <dl> styling
   (PR [#638](https://github.com/alphagov/govuk-frontend/pull/638))
 - Add limited width inputs
-  (PR [#626](https://github.com/alphagov/govuk-frontend/pull/626))
+- Add Webpack as js bundler
+  (PR [#619](https://github.com/alphagov/govuk-frontend/pull/619))
 
 Internal:
 - Update check script for new components and tweak docs

app/views/layouts/_generic.njk

@@ -20,7 +20,7 @@
   {% block body %}
     {% block content %}{% endblock %}
   {% endblock %}
-  <script src="/public/js/govuk-frontend.js"></script>
+  <script src="/public/js/all/all.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/3.5.15/iframeResizer.min.js"></script>
   <!--[if lte IE 8]>
     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/3.5.15/ie8.polyfils.min.js"></script>

config/paths.json

@@ -12,5 +12,19 @@
   "ports": {
     "app": 3000,
     "test": 8888
+  },
+  "entry": {
+    "js": {
+      "all": "./src/all/all.js",
+      "button": "./src/button/button.js",
+      "details": "./src/details/details.js"
+    }
+  },
+  "output": {
+    "js": {
+      "dist": "dist/components/",
+      "packages": "packages/",
+      "public": "public/js/"
+    }
   }
 }

config/webpack.config.js

@@ -0,0 +1,24 @@
+const path = require('path')
+const configPaths = require('./paths.json')
+
+const OUTPUT = process.env.OUTPUT || 'public'
+const outputPath = configPaths.output.js[OUTPUT]
+
+console.log(`Webpack will build output to ${outputPath}`)
+
+const config = {
+  mode: 'production',
+  devtool: 'source-map',
+  entry: configPaths.entry.js,
+  output: {
+    // output path (e.g. packages)
+    path: path.resolve(__dirname, '..', outputPath),
+    filename: '[name]/[name].js', // For example, button/button.js
+    library: 'govuk-frontend',
+    libraryTarget: 'umd',
+    umdNamedDefine: true, // Allows RequireJS to reference `govuk-frontend`
+    sourceMapFilename: '[name]/[name].js.map'
+  }
+}
+
+module.exports = config

gulpfile.js

@@ -17,13 +17,6 @@ require('./tasks/gulp/watch.js')
 require('./tasks/gulp/copy-to-destination.js')
 require('./tasks/gulp/asset-version.js')
 
-// Umbrella scripts tasks for preview ---
-// Runs js lint and compilation
-// --------------------------------------
-gulp.task('scripts', cb => {
-  runsequence('js:lint', 'js:compile', cb)
-})
-
 // Umbrella styles tasks for preview ----
 // Runs js lint and compilation
 // --------------------------------------
@@ -43,9 +36,7 @@ gulp.task('copy:icons', () => {
 // Runs js, scss and accessibility tests
 // --------------------------------------
 gulp.task('test', cb => {
-  runsequence(
-              'js:lint',
-              'scss:lint',
+  runsequence('scss:lint',
               'scss:compile',
               cb)
 })
@@ -55,9 +46,7 @@ gulp.task('test', cb => {
 // taskArguments.destination (public)
 // --------------------------------------
 gulp.task('copy-assets', cb => {
-  runsequence('styles',
-              'scripts',
-            cb)
+  runsequence('styles', 'js:compile', cb)
 })
 
 // Dev task -----------------------------
@@ -86,16 +75,17 @@ gulp.task('serve', ['watch'], () => {
 // Prepare package folder for publishing
 // -------------------------------------
 gulp.task('build:packages', cb => {
-  runsequence(
-              'clean',
+  runsequence('clean',
               'copy-files',
+              'js:compile',
               'generate:readme',
               cb)
 })
 gulp.task('build:dist', cb => {
   runsequence('clean',
               'copy-assets',
               'copy-files',
+              'js:compile',
               'copy:icons',
               'generate:readme',
               'update-assets-version',

lib/file-helper.js

@@ -19,6 +19,34 @@ exports.DistComponentList = fs.readdirSync(configPaths.dist + 'components/')
 
 // Generate list of packages
 exports.PackagesComponentList = fs.readdirSync(configPaths.packages)
+  .filter(file => fs.statSync(path.join(configPaths.packages, file)).isDirectory())
+
+// This helper function takes a component name and returns the expected files
+// to be found in the dist folder of that component
+const expectedFilesForComponent = componentName => {
+  // We don't want to publish all the files that are in `/src` to npm
+  const componentFiles = fs.readdirSync(configPaths.src + componentName)
+  let srcComponentFiles = componentFiles.filter(file => {
+    return (
+      file !== componentName + '.yaml' &&
+      file !== '__snapshots__' &&
+      !file.endsWith('.test.js') &&
+      file !== 'index.njk'
+    )
+  })
+
+  const componentHasJavaScriptEntryPoint = configPaths.entry.js[componentName]
+
+  if (componentHasJavaScriptEntryPoint) {
+    // Webpack builds source maps for every JavaScript file with an entrypoint.
+    srcComponentFiles.push(componentName + '.js.map')
+  } else {
+    // Webpack will not build JavaScript that is not defined as an entrypoint.
+    srcComponentFiles = srcComponentFiles.filter(file => !file.endsWith('.js'))
+  }
+  // Sort the files for ease of comparison
+  return srcComponentFiles.sort()
+}
 
 // List all the files for a given component in dist/components
 //
@@ -27,20 +55,11 @@ exports.PackagesComponentList = fs.readdirSync(configPaths.packages)
 const distFilesForComponent = componentName => {
   return fs.readdirSync(configPaths.dist + 'components/' + componentName)
 }
+
 exports.distFilesForComponent = distFilesForComponent
 
 // List all expected files for a given component in dist/components
-//
-// This helper function takes a component name and returns the expected files
-// to be found in the dist/components folder of that component
-const expectedDistFilesForComponent = componentName => {
-  // We don't want to include the yaml file and index.njk in dist
-  let srcComponentFiles = fs.readdirSync(configPaths.src + componentName)
-                        .filter(file => (file !== componentName + '.yaml' && file !== 'index.njk'))
-  // Sort the files for ease of comparison
-  return srcComponentFiles.sort()
-}
-exports.expectedDistFilesForComponent = expectedDistFilesForComponent
+exports.expectedDistFilesForComponent = expectedFilesForComponent
 
 // List all the files for a given component in packages
 //
@@ -57,8 +76,7 @@ exports.packagesFilesForComponent = packagesFilesForComponent
 // to be found in the packages folder of that component
 const expectedPackagesFilesForComponent = componentName => {
   // We don't want to include the yaml file and index.njk in dist
-  let srcComponentFiles = fs.readdirSync(configPaths.src + componentName)
-                        .filter(file => (file !== componentName + '.yaml' && file !== 'index.njk'))
+  let srcComponentFiles = expectedFilesForComponent(componentName)
   // We expect the package to contain a package.json
   srcComponentFiles.push('package.json')
   // Sort the files for ease of comparison