v0.5.0

Author: eGust

CHANGELOG.md

@@ -1,5 +1,12 @@
 # Change Log
 
+## [0.5.0] - Released on 2019-03-23
+
+- Added option `entry_path` to simplify migration from `Webpacker`
+- Added instructions for migration from `Webpacker`
+- Added task `vue:inspect`
+- Fixed ignoring `RAILS_ENV` for `rake vue:compile`
+
 ## [0.4.1] - Released on 2019-03-18
 
 - Better hint than crashing when run Rails server with `vue_cli-rails` but `rake vue:create` have not been called
@@ -37,4 +44,3 @@
 ## [0.1.2] - Released on 2019-02-24
 
 - First release.
-

Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    vue_cli-rails (0.4.1)
+    vue_cli-rails (0.5.0)
       activesupport (>= 4.2)
       rack-proxy (>= 0.6)
       railties (>= 4.2)

README.md

@@ -4,6 +4,8 @@
 
 Let's make cool boy Vue even cooler on Rails!
 
+[Change Log](./CHANGELOG.md)
+
 ## Installation
 
 Add this line to your Rails application's `Gemfile`:
@@ -42,14 +44,15 @@ And then execute:
 
 Out-of-box workflow:
 
-1. `bundle exec rake vue:create` and follow the steps.
+1. Make sure you already installed `@vue/cli` globally via `npm` (`npm i -g @vue/cli`) or `yarn` (`yarn global add @vue/cli`)
+2. `bundle exec rake vue:create` and follow the steps.
 
     > Don NOT select `In package.json` for "Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?". Some functionalities like alias of jest may not work.
 
-2. Put your JavaScript files under `app/assets/vue/entry_points`.
-3. Insert your entry point by `vue_entry 'entry_point'` in views or `render vue: 'entry_point'` in controllers.
-4. `webpack-dev-server` auto starts alongside `rails server` in dev mode.
-5. Invoke `env RAILS_ENV=production bundle exec rake vue:compile` to compile assets (you still must manually set `RAILS_ENV` to `production`).
+3. Put your JavaScript files under `app/assets/vue/entry_points`.
+4. Insert your entry point by `vue_entry 'entry_point'` in views or `render vue: 'entry_point'` in controllers.
+5. `webpack-dev-server` auto starts alongside `rails server` in dev mode.
+6. Invoke `env RAILS_ENV=production bundle exec rake vue:compile` to compile assets (you still must manually set `RAILS_ENV` to `production`).
 
 > More settings are available in `config/vue.yml`
 
@@ -279,8 +282,38 @@ Feel free to update `vue.config.js` by yourself. There are some lines of boiler-
   }
   ```
 
+- `vue:inspect`
+
+    Alias of `vue inspect`, `npx vue-cli-service inspect` or `yarn exec vue-cli-service inspect`. Display the webpack configuration file.
+
 > You may need to invoke `rake` with `bundle exec`. Rails 5 and above supports new `rails rake:task` flavor.
 
+## Migrate from Webpacker
+
+It's very easy to migrate from Webpacker.
+
+1. Install this gem and `bundle install`
+2. Install `@vue/cli` globally then follow the instructions of `rake vue:create`;
+3. Edit `config/vue.yml`, set `default/entry_path` to `source_path` (by default `app/javascript`) joins `source_entry_path` (by default `packs`);
+4. Change all `javascript_packs_with_chunks_tag` to `vue_entry`;
+5. Fix all nonsense `xxxx_packs_tag`;
+6. If you mind `public_output_path` and `manifest_output` you can change them to follow Webpacker values;
+    > I strongly not recommend to put `manifest_output.json` under `public` folder;
+7. Update `vue.config.js` if you have any customized webpack configurations;
+    > You can inspect how webpack settings at anytime
+8. Directly `rails s` to start dev server;
+    > You can get rid of `bin/webpack-dev-server` and `bin/webpack` now. However, still recommend `rake vue:node_dev` and run `yarn dev` so it will kill `webpack-dev-server` properly when your Rails dev server stopped.
+9.  Call `env RAILS_ENV=production rake vue:compile[with_rails_assets]` instead of `env RAILS_ENV=production rake assets:precompile` to compile all assets for production.
+10. Delete unused Webpacker files
+   - `bin/webpack-dev-server`
+   - `bin/webpack`
+   - `config/webpack`
+   - `config/webpacker.yml`
+
+> Strongly recommend to backup your codebase before the migration.
+
+Enjoy Hot Module Replacement now!
+
 ## Valid Vue CLI config Options
 
 You can check the full list on [Vue CLI official website](https://cli.vuejs.org/config/).

lib/source/vue.rails.js

@@ -57,7 +57,8 @@ module.exports = (() => {
     const root = resolve(__dirname);
     const pop = (config.public_output_path || 'vue_assets').replace(/(^\/+|\/+$)/g, '');
     const {
-      package_manager: packageManager,
+      entry_path: ep = '',
+      entryPath = resolve(root, ep.trim() || 'app/assets/vue/entry_points'),
       manifest_output: manifestOutput,
       js_output: output,
       alias = {},
@@ -79,29 +80,27 @@ module.exports = (() => {
       devServer.contentBase = resolve(root, devServer.contentBase);
     }
     const entry = {};
-    const assetRoot = resolve(root, 'app/assets/vue/entry_points');
     const findAllJsFiles = (path) => {
       readdirSync(path).forEach((fn) => {
         const filename = resolve(path, fn);
         const stat = lstatSync(filename);
         if (stat.isDirectory()) {
           findAllJsFiles(filename);
         } else if (stat.isFile() && fn.endsWith('.js')) {
-          entry[filename.slice(assetRoot.length + 1, -3)] = filename;
+          entry[filename.slice(entryPath.length + 1, -3)] = filename;
         }
       });
     };
 
     try {
-      findAllJsFiles(assetRoot);
+      findAllJsFiles(entryPath);
     } catch (_e) {
       //
     }
 
     settings = {
       env: mode,
       root,
-      packageManager,
       manifestOutput: manifestOutput && resolve(root, manifestOutput),
 
       outputDir: resolve(root, 'public', pop),

lib/source/vue.yml

@@ -1,6 +1,14 @@
 default: &default
   package_manager: ${PACKAGE_MANAGER}
+
+  # entry_path: app/assets/vue/entry_points
+  # # Migrate from Webpacker:
+  # entry_path: app/javascript/packs
+
   public_output_path: vue_assets
+  # # Migrate from Webpacker:
+  # public_output_path: packs
+
   # js_output:
   #   filename: 'js/[name].[hash:8].js'
   #   chunkFilename: 'js/[name].[hash:8].js'
@@ -20,6 +28,7 @@ development:
 production:
   <<: *default
   manifest_output: app/assets/vue/manifest.json
+  # Webpacker manifest_output (public/packs/manifest.json) is not suggested
   productionSourceMap: false
   css:
     extract: true

lib/tasks/vue.rake

@@ -25,7 +25,8 @@ namespace :vue do
   desc 'Build assets: set [with_rails_assets] to invoke assets:precompile as well'
   task :compile, [:with_rails_assets] => :environment do |_t, args|
     pm = VueCli::Rails::Configuration.instance.node_env
-    pm.exec('vue-cli-service build', env: { 'RAILS_ENV' => ::Rails.env })
+    env = { 'RAILS_ENV' => ENV['RAILS_ENV'].presence || ::Rails.env }
+    pm.exec('vue-cli-service build', env: env)
     ::Rake::Task['assets:precompile'].invoke if args.with_rails_assets
   end
 
@@ -48,4 +49,11 @@ namespace :vue do
     require_relative '../helpers/scripts/vue_command'
     VueCommand.new.install_node_dev
   end
+
+  desc 'Inspect webpack settings' do
+  task inspect: :environment do
+    pm = VueCli::Rails::Configuration.instance.node_env
+    env = { 'RAILS_ENV' => ENV['RAILS_ENV'].presence || ::Rails.env }
+    pm.exec('vue-cli-service inspect', env: env)
+  end
 end

lib/vue_cli/rails/configuration.rb

@@ -30,14 +30,14 @@ def node_env
 
       def load_config(config)
         config = config[::Rails.env]
+        entry_path = config['entry_path'].presence || 'app/assets/vue/entry_points'
         c = {
           'configureWebpack' => {
-            'entry' => entry,
+            'entry' => entry(entry_path),
             'resolve' => {},
           },
         }
         @package_manager = config['package_manager']
-        c['packageManger'] = @package_manager
         cw = c['configureWebpack']
 
         c['env'] = ::Rails.env
@@ -138,8 +138,8 @@ def resolve(*path)
         @root.join(*path).to_s
       end
 
-      def entry
-        base_dir = @root.join('app/assets/vue/entry_points')
+      def entry(entry_path)
+        base_dir = @root.join(entry_path)
         start = base_dir.to_s.size + 1
         Dir[base_dir.join('**/*.js')].each_with_object({}) do |filename, h|
           h[filename[start...-3]] = filename

lib/vue_cli/rails/version.rb

@@ -1,5 +1,5 @@
 module VueCli
   module Rails
-    VERSION = '0.4.1'.freeze
+    VERSION = '0.5.0'.freeze
   end
 end