From c54f0d24234e2bee6ca2cf3223f92feab9f16bd9 Mon Sep 17 00:00:00 2001 From: Eric Schultz Date: Tue, 5 Nov 2019 16:39:13 -0600 Subject: [PATCH] Add webpacker --- .browserslistrc | 1 + .gitignore | 7 +++ app/javascript/packs/application.js | 18 ++++++ babel.config.js | 72 ++++++++++++++++++++++ bin/webpack | 19 ++++++ bin/webpack-dev-server | 19 ++++++ config/webpack/development.js | 5 ++ config/webpack/environment.js | 3 + config/webpack/production.js | 5 ++ config/webpack/test.js | 5 ++ config/webpacker.yml | 95 +++++++++++++++++++++++++++++ package.json | 2 + postcss.config.js | 17 ++++-- 13 files changed, 262 insertions(+), 6 deletions(-) create mode 100644 .browserslistrc create mode 100644 app/javascript/packs/application.js create mode 100644 babel.config.js create mode 100755 bin/webpack create mode 100755 bin/webpack-dev-server create mode 100644 config/webpack/development.js create mode 100644 config/webpack/environment.js create mode 100644 config/webpack/production.js create mode 100644 config/webpack/test.js create mode 100644 config/webpacker.yml diff --git a/.browserslistrc b/.browserslistrc new file mode 100644 index 00000000..e94f8140 --- /dev/null +++ b/.browserslistrc @@ -0,0 +1 @@ +defaults diff --git a/.gitignore b/.gitignore index fdb06a8c..c809d1c3 100755 --- a/.gitignore +++ b/.gitignore @@ -66,3 +66,10 @@ javascripts/api !public/css/donate-button.v2.css !public/svgs !public/svgs/* + +/public/packs +/public/packs-test +/node_modules +/yarn-error.log +yarn-debug.log* +.yarn-integrity diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js new file mode 100644 index 00000000..7c3021d7 --- /dev/null +++ b/app/javascript/packs/application.js @@ -0,0 +1,18 @@ +/* eslint no-console:0 */ +// This file is automatically compiled by Webpack, along with any other files +// present in this directory. You're encouraged to place your actual application logic in +// a relevant structure within app/javascript and only use these pack files to reference +// that code so it'll be compiled. +// +// To reference this file, add <%= javascript_pack_tag 'application' %> to the appropriate +// layout file, like app/views/layouts/application.html.erb + + +// Uncomment to copy all static images under ../images to the output folder and reference +// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>) +// or the `imagePath` JavaScript helper below. +// +// const images = require.context('../images', true) +// const imagePath = (name) => images(name, true) + +console.log('Hello World from Webpacker') diff --git a/babel.config.js b/babel.config.js new file mode 100644 index 00000000..84888b61 --- /dev/null +++ b/babel.config.js @@ -0,0 +1,72 @@ +module.exports = function(api) { + var validEnv = ['development', 'test', 'production'] + var currentEnv = api.env() + var isDevelopmentEnv = api.env('development') + var isProductionEnv = api.env('production') + var isTestEnv = api.env('test') + + if (!validEnv.includes(currentEnv)) { + throw new Error( + 'Please specify a valid `NODE_ENV` or ' + + '`BABEL_ENV` environment variables. Valid values are "development", ' + + '"test", and "production". Instead, received: ' + + JSON.stringify(currentEnv) + + '.' + ) + } + + return { + presets: [ + isTestEnv && [ + require('@babel/preset-env').default, + { + targets: { + node: 'current' + } + } + ], + (isProductionEnv || isDevelopmentEnv) && [ + require('@babel/preset-env').default, + { + forceAllTransforms: true, + useBuiltIns: 'entry', + corejs: 3, + modules: false, + exclude: ['transform-typeof-symbol'] + } + ] + ].filter(Boolean), + plugins: [ + require('babel-plugin-macros'), + require('@babel/plugin-syntax-dynamic-import').default, + isTestEnv && require('babel-plugin-dynamic-import-node'), + require('@babel/plugin-transform-destructuring').default, + [ + require('@babel/plugin-proposal-class-properties').default, + { + loose: true + } + ], + [ + require('@babel/plugin-proposal-object-rest-spread').default, + { + useBuiltIns: true + } + ], + [ + require('@babel/plugin-transform-runtime').default, + { + helpers: false, + regenerator: true, + corejs: false + } + ], + [ + require('@babel/plugin-transform-regenerator').default, + { + async: false + } + ] + ].filter(Boolean) + } +} diff --git a/bin/webpack b/bin/webpack new file mode 100755 index 00000000..008ecb22 --- /dev/null +++ b/bin/webpack @@ -0,0 +1,19 @@ +#!/usr/bin/env ruby + +ENV["RAILS_ENV"] ||= ENV["RACK_ENV"] || "development" +ENV["NODE_ENV"] ||= "development" + +require "pathname" +ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../Gemfile", + Pathname.new(__FILE__).realpath) + +require "rubygems" +require "bundler/setup" + +require "webpacker" +require "webpacker/webpack_runner" + +APP_ROOT = File.expand_path("..", __dir__) +Dir.chdir(APP_ROOT) do + Webpacker::WebpackRunner.run(ARGV) +end diff --git a/bin/webpack-dev-server b/bin/webpack-dev-server new file mode 100755 index 00000000..a931a9b7 --- /dev/null +++ b/bin/webpack-dev-server @@ -0,0 +1,19 @@ +#!/usr/bin/env ruby + +ENV["RAILS_ENV"] ||= ENV["RACK_ENV"] || "development" +ENV["NODE_ENV"] ||= "development" + +require "pathname" +ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../Gemfile", + Pathname.new(__FILE__).realpath) + +require "rubygems" +require "bundler/setup" + +require "webpacker" +require "webpacker/dev_server_runner" + +APP_ROOT = File.expand_path("..", __dir__) +Dir.chdir(APP_ROOT) do + Webpacker::DevServerRunner.run(ARGV) +end diff --git a/config/webpack/development.js b/config/webpack/development.js new file mode 100644 index 00000000..c5edff94 --- /dev/null +++ b/config/webpack/development.js @@ -0,0 +1,5 @@ +process.env.NODE_ENV = process.env.NODE_ENV || 'development' + +const environment = require('./environment') + +module.exports = environment.toWebpackConfig() diff --git a/config/webpack/environment.js b/config/webpack/environment.js new file mode 100644 index 00000000..d16d9af7 --- /dev/null +++ b/config/webpack/environment.js @@ -0,0 +1,3 @@ +const { environment } = require('@rails/webpacker') + +module.exports = environment diff --git a/config/webpack/production.js b/config/webpack/production.js new file mode 100644 index 00000000..be0f53aa --- /dev/null +++ b/config/webpack/production.js @@ -0,0 +1,5 @@ +process.env.NODE_ENV = process.env.NODE_ENV || 'production' + +const environment = require('./environment') + +module.exports = environment.toWebpackConfig() diff --git a/config/webpack/test.js b/config/webpack/test.js new file mode 100644 index 00000000..c5edff94 --- /dev/null +++ b/config/webpack/test.js @@ -0,0 +1,5 @@ +process.env.NODE_ENV = process.env.NODE_ENV || 'development' + +const environment = require('./environment') + +module.exports = environment.toWebpackConfig() diff --git a/config/webpacker.yml b/config/webpacker.yml new file mode 100644 index 00000000..46ed57dd --- /dev/null +++ b/config/webpacker.yml @@ -0,0 +1,95 @@ +# Note: You must restart bin/webpack-dev-server for changes to take effect + +default: &default + source_path: app/javascript + source_entry_path: packs + public_root_path: public + public_output_path: packs + cache_path: tmp/cache/webpacker + check_yarn_integrity: false + webpack_compile_output: false + + # Additional paths webpack should lookup modules + # ['app/assets', 'engine/foo/app/assets'] + resolved_paths: [] + + # Reload manifest.json on all requests so we reload latest compiled packs + cache_manifest: false + + # Extract and emit a css file + extract_css: false + + static_assets_extensions: + - .jpg + - .jpeg + - .png + - .gif + - .tiff + - .ico + - .svg + - .eot + - .otf + - .ttf + - .woff + - .woff2 + + extensions: + - .mjs + - .js + - .sass + - .scss + - .css + - .module.sass + - .module.scss + - .module.css + - .png + - .svg + - .gif + - .jpeg + - .jpg + +development: + <<: *default + compile: true + + # Verifies that correct packages and versions are installed by inspecting package.json, yarn.lock, and node_modules + check_yarn_integrity: true + + # Reference: https://webpack.js.org/configuration/dev-server/ + dev_server: + https: false + host: localhost + port: 3035 + public: localhost:3035 + hmr: false + # Inline should be set to true if using HMR + inline: true + overlay: true + compress: true + disable_host_check: true + use_local_ip: false + quiet: false + headers: + 'Access-Control-Allow-Origin': '*' + watch_options: + ignored: '**/node_modules/**' + + +test: + <<: *default + compile: true + + # Compile test packs to a separate directory + public_output_path: packs-test + +production: + <<: *default + + # Production depends on precompilation of packs prior to booting for performance. + compile: false + + # Extract and emit a css file + extract_css: true + + # Cache manifest.json for performance + cache_manifest: true diff --git a/package.json b/package.json index b1ddd3c8..426943d5 100644 --- a/package.json +++ b/package.json @@ -85,10 +85,12 @@ "uglifyjs-webpack-plugin": "^0.4.6", "url-loader": "^1.0.1", "webpack": "^3", + "webpack-dev-server": "^3.9.0", "webpack-merge": "^4.1.2", "webpack-sweet-entry": "^1.1.4" }, "dependencies": { + "@rails/webpacker": "^4.0.7", "attr-binder": "0.3.1", "aws-sdk": "^2.402.0", "chart.js": "2.1.4", diff --git a/postcss.config.js b/postcss.config.js index 5e3b3032..e5f6d9a7 100644 --- a/postcss.config.js +++ b/postcss.config.js @@ -1,8 +1,13 @@ // License: AGPL-3.0-or-later WITH Web-Template-Output-Additional-Permission-3.0-or-later module.exports = { - plugins: { - 'postcss-import': {}, - 'postcss-cssnext': {}, - 'cssnano': {} - }, -}; + plugins: [ + require('postcss-import'), + require('postcss-flexbugs-fixes'), + require('postcss-preset-env')({ + autoprefixer: { + flexbox: 'no-2009' + }, + stage: 3 + }) + ] +}