Merge pull request #2 from eGust/release

Release

Author: eGust

.travis.yml

@@ -5,19 +5,24 @@ cache:
   bundler: true
   yarn: true
 
-rvm:
-  - 2.3
-  - 2.4
-  - 2.5
-
-env:
-  - RAILS_VERSION=4.2
-  - RAILS_VERSION=5.2
-
 matrix:
-  exclude:
+  allow_failures:
+  - env: RAILS_VERSION=pre
+  include:
+    - rvm: 2.3
+      env: RAILS_VERSION=4.2 PACKAGE_MANAGER=npm
+    - rvm: 2.3
+      env: RAILS_VERSION=5.2 PACKAGE_MANAGER=yarn
+    - rvm: 2.4
+      env: RAILS_VERSION=5.2 PACKAGE_MANAGER=npm
+    - rvm: 2.5
+      env: RAILS_VERSION=5.2 PACKAGE_MANAGER=yarn
+    - rvm: 2.6
+      env: RAILS_VERSION=5.2 PACKAGE_MANAGER=npm
     - rvm: 2.5
-      env: RAILS_VERSION=4.2
+      env: RAILS_VERSION=pre PACKAGE_MANAGER=npm
+    - rvm: 2.6
+      env: RAILS_VERSION=pre PACKAGE_MANAGER=yarn
 
 gemfile:
   - test/Gemfile-rails.$RAILS_VERSION
@@ -28,19 +33,17 @@ before_install:
 install:
   - nvm install --lts
   - node -v
-  - yarn global add @vue/cli
   - gem install rspec
 
-before_script:
-  - sh -c 'cd test && ./install.rb'
-
 script:
-  - sh -c 'cd test && rspec ./vcr_spec.rb'
+  - sh -c 'cd test && ./install.rb'
+  - sh -c 'cd test && rspec ./vcr_specs.rb'
 
 jobs:
   include:
     - stage: gem release
       rvm: 2.3
+      env: RAILS_VERSION=4.2 PACKAGE_MANAGER=yarn
       script: echo "Deploying to rubygems.org ..."
       deploy:
         provider: rubygems

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/helpers/lib/common.rb

@@ -3,5 +3,13 @@ class Object
     def blank?
       respond_to?(:empty?) ? !!empty? : !self
     end
+
+    def presence
+      blank? ? nil : self
+    end
+
+    def present?
+      !blank?
+    end
   end
 end

lib/helpers/scripts/vue_create.rb

@@ -74,7 +74,7 @@ def run_vue_create?
     if @pack.exist?
       puts 'Detected `package.json`!'
       pack_input = @input.gets(
-        '  Do you want `vue create?` to overwrite your package.json',
+        '  Do you want vue-cli to overwrite your package.json',
         'yAks',
         a: 'Auto', k: 'Keep', s: 'Skip vue create',
       )
@@ -86,7 +86,7 @@ def run_vue_create?
     if gi.exist?
       puts 'Detected `.gitignore`!'
       gi_input = @input.gets(
-        '  Do you want `vue create?` to overwrite your .gitignore',
+        '  Do you want vue-cli to overwrite your .gitignore',
         'yMk',
         m: 'Merge', k: 'Keep',
       )

lib/source/vue.rails.js

@@ -57,6 +57,8 @@ module.exports = (() => {
     const root = resolve(__dirname);
     const pop = (config.public_output_path || 'vue_assets').replace(/(^\/+|\/+$)/g, '');
     const {
+      entry_path: ep = '',
+      entryPath = resolve(root, ep.trim() || 'app/assets/vue/entry_points'),
       manifest_output: manifestOutput,
       js_output: output,
       alias = {},
@@ -78,21 +80,20 @@ 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) {
       //
     }

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,9 +30,10 @@ 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' => {},
           },
         }
@@ -137,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