From 1112cbf316d0427462917cb7f46e155b8d672dc8 Mon Sep 17 00:00:00 2001 From: rhymes Date: Mon, 25 May 2020 18:03:18 +0200 Subject: [PATCH] [deploy] Update webpacker configuration (#8004) --- .gitignore | 2 + babel.config.js | 97 +++++++++++-------- bin/webpack | 31 +++--- bin/webpack-dev-server | 70 +++---------- .../initializers/content_security_policy.rb | 23 +++-- config/webpack/development.js | 4 + config/webpack/production.js | 4 + config/webpack/test.js | 4 + config/webpacker.yml | 4 - 9 files changed, 108 insertions(+), 131 deletions(-) diff --git a/.gitignore b/.gitignore index b79d3cc0c..92654f9c4 100644 --- a/.gitignore +++ b/.gitignore @@ -39,6 +39,8 @@ latest.dump /public/packs /public/packs-test /node_modules +yarn-debug.log* +.yarn-integrity # Ignore storybook static site generation storybook-static/ diff --git a/babel.config.js b/babel.config.js index 147d4094b..108abe942 100644 --- a/babel.config.js +++ b/babel.config.js @@ -1,40 +1,61 @@ -// eslint-disable-next-line no-undef -module.exports = { - presets: [ - [ - '@babel/preset-env', - { - modules: false, - targets: { - browsers: '> 1%', +/* global module */ + +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: [ + (isProductionEnv || isDevelopmentEnv || isTestEnv) && [ + '@babel/preset-env', + { + modules: false, + targets: { browsers: '> 1%' }, + useBuiltIns: 'entry', + corejs: { version: 3, proposals: false }, + exclude: ['transform-regenerator'], + bugfixes: true, + forceAllTransforms: true, }, - useBuiltIns: 'entry', - corejs: { version: 3, proposals: false }, - exclude: ['transform-regenerator'], - bugfixes: true, - }, - ], - 'preact', - ], - env: { - test: { - plugins: ['@babel/plugin-transform-modules-commonjs'], - }, - }, - plugins: [ - '@babel/plugin-syntax-dynamic-import', - '@babel/plugin-proposal-object-rest-spread', - [ - '@babel/plugin-proposal-class-properties', - { - spec: true, - }, - ], - [ - '@babel/plugin-transform-react-jsx', - { - pragma: 'h', - }, - ], - ], + 'preact', + ], + ].filter(Boolean), + plugins: [ + '@babel/plugin-syntax-dynamic-import', + isTestEnv && 'babel-plugin-dynamic-import-node', + isTestEnv && '@babel/plugin-transform-modules-commonjs', + '@babel/plugin-transform-destructuring', + [ + '@babel/plugin-proposal-class-properties', + { + spec: true, + }, + ], + [ + '@babel/plugin-proposal-object-rest-spread', + { + useBuiltIns: true, + }, + ], + [ + '@babel/plugin-transform-react-jsx', + { + pragma: 'h', + }, + ], + ].filter(Boolean), + }; }; diff --git a/bin/webpack b/bin/webpack index 9a0e16099..1031168d0 100755 --- a/bin/webpack +++ b/bin/webpack @@ -1,27 +1,18 @@ #!/usr/bin/env ruby -$stdout.sync = true -require "shellwords" +ENV["RAILS_ENV"] ||= ENV["RACK_ENV"] || "development" +ENV["NODE_ENV"] ||= "development" -ENV["RAILS_ENV"] ||= "development" -RAILS_ENV = ENV["RAILS_ENV"] +require "pathname" +ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../Gemfile", + Pathname.new(__FILE__).realpath) -ENV["NODE_ENV"] ||= RAILS_ENV -NODE_ENV = ENV["NODE_ENV"] +require "bundler/setup" -APP_PATH = File.expand_path("../", __dir__) -NODE_MODULES_PATH = File.join(APP_PATH, "node_modules") -WEBPACK_CONFIG = File.join(APP_PATH, "config/webpack/#{NODE_ENV}.js") +require "webpacker" +require "webpacker/webpack_runner" -unless File.exist?(WEBPACK_CONFIG) - puts "Webpack configuration not found." - puts "Please run bundle exec rails webpacker:install to install webpacker" - exit! -end - -env = { "NODE_PATH" => NODE_MODULES_PATH.shellescape } -cmd = ["#{NODE_MODULES_PATH}/.bin/webpack", "--config", WEBPACK_CONFIG] + ARGV - -Dir.chdir(APP_PATH) do - exec env, *cmd +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 index 63edc01e7..dd9662737 100755 --- a/bin/webpack-dev-server +++ b/bin/webpack-dev-server @@ -1,66 +1,18 @@ #!/usr/bin/env ruby -$stdout.sync = true -require "shellwords" -require "yaml" -require "socket" +ENV["RAILS_ENV"] ||= ENV["RACK_ENV"] || "development" +ENV["NODE_ENV"] ||= "development" -ENV["RAILS_ENV"] ||= "development" -RAILS_ENV = ENV["RAILS_ENV"] +require "pathname" +ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../Gemfile", + Pathname.new(__FILE__).realpath) -ENV["NODE_ENV"] ||= RAILS_ENV -NODE_ENV = ENV["NODE_ENV"] +require "bundler/setup" -APP_PATH = File.expand_path("../", __dir__) -CONFIG_FILE = File.join(APP_PATH, "config/webpacker.yml") -NODE_MODULES_PATH = File.join(APP_PATH, "node_modules") -WEBPACK_CONFIG = File.join(APP_PATH, "config/webpack/#{NODE_ENV}.js") +require "webpacker" +require "webpacker/dev_server_runner" -DEFAULT_LISTEN_HOST_ADDR = NODE_ENV == "development" ? "localhost" : "0.0.0.0" - -def args(key) - index = ARGV.index(key) - index ? ARGV[index + 1] : nil -end - -begin - dev_server = YAML.load_file(CONFIG_FILE)[RAILS_ENV]["dev_server"] - - HOSTNAME = args("--host") || dev_server["host"] - PORT = args("--port") || dev_server["port"] - HTTPS = ARGV.include?("--https") || dev_server["https"] - DEV_SERVER_ADDR = "http#{'s' if HTTPS}://#{HOSTNAME}:#{PORT}".freeze - LISTEN_HOST_ADDR = args("--listen-host") || DEFAULT_LISTEN_HOST_ADDR -rescue Errno::ENOENT, NoMethodError - $stdout.puts "Webpack dev_server configuration not found in #{CONFIG_FILE}." - $stdout.puts "Please run bundle exec rails webpacker:install to install webpacker" - exit! -end - -begin - server = TCPServer.new(LISTEN_HOST_ADDR, PORT) - server.close -rescue Errno::EADDRINUSE - $stdout.puts "Another program is running on port #{PORT}. Set a new port in #{CONFIG_FILE} for dev_server" - exit! -end - -# Delete supplied host, port and listen-host CLI arguments -["--host", "--port", "--listen-host"].each do |arg| - ARGV.delete(args(arg)) - ARGV.delete(arg) -end - -env = { "NODE_PATH" => NODE_MODULES_PATH.shellescape } - -cmd = [ - "#{NODE_MODULES_PATH}/.bin/webpack-dev-server", "--progress", "--color", - "--config", WEBPACK_CONFIG, - "--host", LISTEN_HOST_ADDR, - "--public", "#{HOSTNAME}:#{PORT}", - "--port", PORT.to_s -] + ARGV - -Dir.chdir(APP_PATH) do - exec env, *cmd +APP_ROOT = File.expand_path("..", __dir__) +Dir.chdir(APP_ROOT) do + Webpacker::DevServerRunner.run(ARGV) end diff --git a/config/initializers/content_security_policy.rb b/config/initializers/content_security_policy.rb index d3bcaa5ec..b7901328a 100644 --- a/config/initializers/content_security_policy.rb +++ b/config/initializers/content_security_policy.rb @@ -4,17 +4,20 @@ # For further information see the following documentation # https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy -# Rails.application.config.content_security_policy do |policy| -# policy.default_src :self, :https -# policy.font_src :self, :https, :data -# policy.img_src :self, :https, :data -# policy.object_src :none -# policy.script_src :self, :https -# policy.style_src :self, :https +Rails.application.config.content_security_policy do |policy| + # policy.default_src :self, :https + # policy.font_src :self, :https, :data + # policy.img_src :self, :https, :data + # policy.object_src :none + # policy.script_src :self, :https + # policy.style_src :self, :https -# # Specify URI for violation reports -# # policy.report_uri "/csp-violation-report-endpoint" -# end + # # Specify URI for violation reports + # # policy.report_uri "/csp-violation-report-endpoint" + + # allow webpack-dev-server host as allowed origin for connect-src + policy.connect_src :self, :https, "http://localhost:3035", "ws://localhost:3035" if Rails.env.development? +end # If you are using UJS then enable automatic nonce generation # Rails.application.config.content_security_policy_nonce_generator = -> request { SecureRandom.base64(16) } diff --git a/config/webpack/development.js b/config/webpack/development.js index 009652d5c..d17f02706 100644 --- a/config/webpack/development.js +++ b/config/webpack/development.js @@ -1,3 +1,7 @@ +/* global process, module, require */ + +process.env.NODE_ENV = process.env.NODE_ENV || 'development'; + const environment = require('./environment'); const config = environment.toWebpackConfig(); diff --git a/config/webpack/production.js b/config/webpack/production.js index d7346478c..404e684a7 100644 --- a/config/webpack/production.js +++ b/config/webpack/production.js @@ -1,3 +1,7 @@ +/* global process, module, require */ + +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 index 25ba47f9e..b38fa463d 100644 --- a/config/webpack/test.js +++ b/config/webpack/test.js @@ -1,3 +1,7 @@ +/* global process, module, require */ + +process.env.NODE_ENV = process.env.NODE_ENV || 'development'; + const environment = require('./environment'); const config = environment.toWebpackConfig(); diff --git a/config/webpacker.yml b/config/webpacker.yml index 93152c6c4..5becf2537 100644 --- a/config/webpacker.yml +++ b/config/webpacker.yml @@ -6,7 +6,6 @@ default: &default public_root_path: public public_output_path: packs cache_path: tmp/cache/webpacker - check_yarn_integrity: false webpack_compile_output: true # Additional paths webpack should lookup modules @@ -54,9 +53,6 @@ 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