安裝webpacker於rails4.2 on bash on windows 10


#1

大家好,我參考高見龍大大的影片來裝webpacker在rails 4.2的專案上,但過程中常會出現如下的畫面,這個和我用BASH ON WINDOWS 10有關係嗎?這個有辦法解決嗎?
image

另外我本來是有先用react-rails,是否要先移除這個GEM和NODE.JS的套件再裝WEBPACKER比較好?

最後附上我參考的影片:https://www.facebook.com/5xruby/videos/728974323968845/?hc_location=ufi


#2

關於 windows 上開發 Ruby 所發生的問題 … 基本上我這邊都一率不回應的 …


#3

沒問題啊,這只是進度條重繪的bug 而已,應該不影響


#4

剛剛調了一下字型就好了,結果是新細明體的鍋。

另外想問一下,我在執行./bin/webpack-dev-server/這個指令時,

會一直跳出錯誤說找不到(我的專案目錄)/node_modules/.bin/webpack-dev-server這個檔案或資料夾,有大大有經驗這個要怎麼解嗎?

GOOGLE的結果大都是找不到./bin/webpack-dev-server/這個指令,沒什麼幫助……


#5

你可能要貼一下你的 webpack.config.js / package.json 檔看一下你的設定…

webpack-dev-server 一般會搭 webpack 使用…

webpack-dev-server 也有些官方要設定的東西(e.g. Content Base…)

給您參考一下範例修改使用吧…(有些 output folder 要修改成自已的 porject .

webpack.config.js

const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = (env) => {
  const isProduction = env === 'production';
  const CSSExtract = new ExtractTextPlugin('styles.css');
  return {
    entry: './src/app.js', // 你的入口點(要把 js/css 打包的入口
    output: {  // 你的 output folder file name
      path: path.join(__dirname, 'public', 'dist'),
      filename: 'bundle.js'
    },
    module: {  // 處理哪些你要的檔案(e.g. sass/scss/css..)
      rules: [{
        loader: 'babel-loader',
        test: /\.js$/, 
        exclude: /node_modules/
      }, {
        test: /\.s?css$/,
        use: CSSExtract.extract({
          use: [
            {
              loader: 'css-loader',
              options: {
                sourceMap: true
              }
            },
            {
              loader: 'sass-loader',
              options: {
                sourceMap: true
              }
            }
          ]
        })
      }]
    },
    plugins: [
      CSSExtract
    ],
    devtool: isProduction ? 'source-map' : 'cheat-module-eval-source-map',
    // webpack-dev-server setting
    devServer: {
      contentBase: path.join(__dirname, 'public'),
      historyApiFallback: true,
      publicPath: '/dist/'
    }
  }
};

package.json

{
  "name": "project-name",
  "version": "1.0.0",
  "description": "init dev server",
  "main": "app.js",
  "repository": "github address",
  "license": "MIT",
  "scripts": {
    "dev-server": "webpack-dev-server",
    "build:dev": "webpack",
    "build:prod": "webpack -p --env production"
  },
  "dependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "css-loader": "^0.28.7",
    "extract-text-webpack-plugin": "^3.0.1",
    "node-sass": "^4.5.3",
    "normalize.css": "^7.0.0",
    "path": "^0.12.7",
    "sass-loader": "^6.0.6",
    "webpack": "^3.7.1",
    "webpack-dev-server": "^2.9.1"
  }
}

#6

因為我是照著 https://github.com/rails/webpacker上的說明安裝的,安裝完成後並沒有看到這些檔案。請問是否把這些設定檔弄好就可以了呢?

另外我注意到安裝過程中有些error,想請問是否有影響呢?(雖然最後顯示安裝成功)

  create  config/webpacker.yml
Copying webpack core config and loaders
  create  config/webpack
  create  config/webpack/development.js
  create  config/webpack/environment.js
  create  config/webpack/production.js
  create  config/webpack/test.js
Copying .postcssrc.yml to app root directory
  create  .postcssrc.yml
Copying .babelrc to app root directory
  create  .babelrc
Creating javascript app source directory
   exist  app/javascript
   identical  app/javascript/packs/application.js
Installing binstubs
     run  bundle binstubs webpacker from "."
  append  .gitignore
Installing all JavaScript dependencies
     run  yarn add @rails/webpacker coffeescript@1.12.7 from "."
yarn add v1.3.2
info No lockfile found.
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@1.1.3: The platform "linux" is incompatible with this module.
info "fsevents@1.1.3" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning "@rails/webpacker > postcss-cssnext@3.0.2" has unmet peer dependency "caniuse-lite@^1.0.30000697".
error An unexpected error occurred: "EINVAL: invalid argument, lstat '/mnt/d/Github/cfegame/node_modules/babel-core/package-lock.json'".
info If you think this is a bug, please open a bug report with the information provided in "/mnt/d/Github/cfegame/yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.
Installing dev server for live reloading
     run  yarn add --dev webpack-dev-server from "."
yarn add v1.3.2
info No lockfile found.
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@1.1.3: The platform "linux" is incompatible with this module.
info "fsevents@1.1.3" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning "webpack-dev-server > webpack-dev-middleware@1.12.1" has unmet peer dependency "webpack@^1.0.0 || ^2.0.0 || ^3.0.0".
warning " > webpack-dev-server@2.9.4" has unmet peer dependency "webpack@^2.2.0 || ^3.0.0".
error An unexpected error occurred: "EINVAL: invalid argument, lstat '/mnt/d/Github/cfegame/node_modules/camelcase-keys/node_modules/camelcase/license'".
info If you think this is a bug, please open a bug report with the information provided in "/mnt/d/Github/cfegame/yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.
Webpacker successfully installed 🎉 🍰

#7

後來發現yarn在bash on linux on windows 10似乎有點問題。參考:https://github.com/Microsoft/WSL/issues/2448

work around 是把node_modules放在/mnt以外的地方(我是放在家目錄裡),再用ln -s 連回來。

stack overflow上的問題:https://stackoverflow.com/questions/47502854/webpacker-is-not-installed-successfully-on-rails-4-2


#8

誠心建議立馬轉 macOS / linux,VirtualBox 就可以裝 Ubuntu,免費。
不然你以後會碰到更多浪費生命的垃圾問題


#9

我第一個回應就說了哩 … 不看前言和警告,浪費人生時間的堅持,就讓他去唄 …

我是不會用一個連 daemon 都沒辦法開的精簡版 linux … 連用 raspberry pi 開都比它好 Orz"