move browserslist and babel config into package

- running webpacker:install will now add browserslist and babel
configuration into package.json instead of copying files
    - webpacker:install:react also updated to use preset in package.json

- use babel/preset.js in npm package as a preset, providing updates and
less complexity to apps
    - babel/preset-react.js can be used for react applications

- additionally, updated rubocop.yml to target ruby 2.4 since it is now
the minimum supported version

.rubocop.yml

@@ -1,6 +1,6 @@
 require: rubocop-performance
 AllCops:
-  TargetRubyVersion: 2.2
+  TargetRubyVersion: 2.4
   # RuboCop has a bunch of cops enabled by default. This setting tells RuboCop
   # to ignore them, so only the ones explicitly set in this file are enabled.
   DisabledByDefault: true

lib/install/react.rb

@@ -1,10 +1,12 @@
 require "webpacker/configuration"
-require "fileutils"
+require "json"
 
-replace_babel_config = FileUtils.compare_file(Rails.root.join("babel.config.js"), "#{__dir__}/config/babel.config.js")
-
-say "Copying babel.config.js to app root directory"
-copy_file "#{__dir__}/examples/react/babel.config.js", "babel.config.js", force: replace_babel_config
+say "Adding react-preset to babel configuration in package.json"
+old_package = JSON.parse(File.read('package.json'))
+old_package["babel"] = {
+  "presets": ["./node_modules/@rails/webpacker/package/babel/preset-react.js"]
+}
+File.write('package.json', JSON.dump(old_package))
 
 say "Copying react example entry file to #{Webpacker.config.source_entry_path}"
 copy_file "#{__dir__}/examples/react/hello_react.jsx", "#{Webpacker.config.source_entry_path}/hello_react.jsx"

lib/install/template.rb

@@ -7,12 +7,6 @@
 say "Copying postcss.config.js to app root directory"
 copy_file "#{__dir__}/config/postcss.config.js", "postcss.config.js"
 
-say "Copying babel.config.js to app root directory"
-copy_file "#{__dir__}/config/babel.config.js", "babel.config.js"
-
-say "Copying .browserslistrc to app root directory"
-copy_file "#{__dir__}/config/.browserslistrc", ".browserslistrc"
-
 if Dir.exists?(Webpacker.config.source_path)
   say "The JavaScript app source directory already exists"
 else
@@ -45,6 +39,18 @@
 say "Installing dev server for live reloading"
 run "yarn add --dev webpack-dev-server"
 
+insert_into_file Rails.root.join("package.json").to_s, before: /\n}\n*$/ do
+  <<~JSON.chomp
+  ,
+    "babel": {
+      "presets": ["./node_modules/@rails/webpacker/package/babel/preset.js"]
+    },
+    "browserslist": [
+      "defaults"
+    ]
+  JSON
+end
+
 if Rails::VERSION::MAJOR == 5 && Rails::VERSION::MINOR > 1
   say "You need to allow webpack-dev-server host as allowed origin for connect-src.", :yellow
   say "This can be done in Rails 5.2+ for development environment in the CSP initializer", :yellow

lib/install/examples/react/babel.config.js → package/babel/preset-react.js

@@ -1,17 +1,13 @@
-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')
+module.exports = function config(api) {
+  const validEnv = ['development', 'test', 'production']
+  const currentEnv = api.env()
+  const isDevelopmentEnv = api.env('development')
+  const isProductionEnv = api.env('production')
+  const 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) +
-        '.'
+      `Please specify a valid NODE_ENV or BABEL_ENV environment variable. Valid values are "development", "test", and "production". Instead, received: "${JSON.stringify(currentEnv)}".`
     )
   }
 
@@ -24,8 +20,7 @@ module.exports = function(api) {
             node: 'current'
           },
           modules: 'commonjs'
-        },
-        '@babel/preset-react'
+        }
       ],
       (isProductionEnv || isDevelopmentEnv) && [
         '@babel/preset-env',

lib/install/config/babel.config.js → package/babel/preset.js

@@ -1,17 +1,13 @@
-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')
+module.exports = function config(api) {
+  const validEnv = ['development', 'test', 'production']
+  const currentEnv = api.env()
+  const isDevelopmentEnv = api.env('development')
+  const isProductionEnv = api.env('production')
+  const 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) +
-        '.'
+      `Please specify a valid NODE_ENV or BABEL_ENV environment variable. Valid values are "development", "test", and "production". Instead, received: "${JSON.stringify(currentEnv)}".`
     )
   }