2017-01-20 5 views
1

私はReactOnRailsアプリを使用していて、node-modulesフォルダにnpmを使用してインストールされたパッケージがあります。どのようにしてapp/assets/javascript/application.jsでこれらのjavascriptライブラリを利用できるようにすることができますか?jqueryを私のモジュールと私のGemfileにインストールする必要はありませんか?ウェブパック付きのレール

これは私のWebPACKの設定ファイルである:

/* eslint comma-dangle: ["error", 
    {"functions": "never", "arrays": "only-multiline", "objects": 
"only-multiline"} ] */ 

const webpack = require('webpack'); 
const path = require('path'); 

const devBuild = process.env.NODE_ENV !== 'production'; 
const nodeEnv = devBuild ? 'development' : 'production'; 

const config = { 
    entry: [ 
    'es5-shim/es5-shim', 
    'es5-shim/es5-sham', 
    'babel-polyfill', 
    './app/bundles/Home/startup/registration', 
    ], 

    output: { 
    filename: 'webpack-bundle.js', 
    path: '../app/assets/webpack', 
    }, 

    resolve: { 
    extensions: ['', '.js', '.jsx'], 
    alias: { 
     react: path.resolve('./node_modules/react'), 
     'react-dom': path.resolve('./node_modules/react-dom'), 
    }, 
    }, 
    plugins: [ 
    new webpack.DefinePlugin({ 
     'process.env': { 
     NODE_ENV: JSON.stringify(nodeEnv), 
     }, 
    }), 
    ], 
    module: { 
    loaders: [ 
     { 
     test: require.resolve('react'), 
     loader: 'imports?shim=es5-shim/es5-shim&sham=es5-shim/es5-sham', 
     }, 
     { 
     test: /\.jsx?$/, 
     loader: 'babel-loader', 
     exclude: /node_modules/, 
     }, 
    ], 
    }, 
}; 

module.exports = config; 

if (devBuild) { 
    console.log('Webpack dev build for Rails'); // eslint-disable-line no-console 
    module.exports.devtool = 'eval-source-map'; 
} else { 
    config.plugins.push(
    new webpack.optimize.DedupePlugin() 
); 
    console.log('Webpack production build for Rails'); // eslint-disable-line no-console 
} 
+1

Webpackerを代わりに使用すると考えましたか? https://github.com/rails/webpacker Rails 5.1はwebpackを正式にサポートします:https://github.com/rails/rails/pull/27288 – Peter

+0

Webpackerについてはまだ聞いていません。確認してみるよ。 そして、それはレール5.1についての素晴らしいニュースです! – Ancinek

答えて

1

のRails 5.1はwebpackerと削除デフォルトjquery-rails依存関係が付属していますが、あなたが好きなら、あなたはまだそれを使用することができます。テンプレートで:

<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %> 

は(app/assets/javascript/application.jsからの)伝統的な資産のパイプラインを使用してJSをコンパイルします。

<%= javascript_pack_tag 'application' %> 

ながらwebpackerを使用してapp/javascript/packs/application.jsからあなたのJSモジュールをコンパイルします。

rails webpacker:compile 
関連する問題