使用Webpack导轨

我使用的是ReactOnRails应用程序，我有node-modules文件夹，使用npm安装了软件包。如何让这些javascript库在app/assets/javascript/application.js中可用，所以我不必在我的模块和我的Gemfile中安装jquery？使用Webpack导轨

这是我的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 
}

来源

2017-01-20 Ancinek

您是否考虑过使用webpacker？ https://github.com/rails/webpacker Rails 5.1将正式支持webpack：https://github.com/rails/rails/pull/27288 – Peter

我还没有听说过webpacker。我会看看。哇，那些关于rails 5.1的好消息！ – Ancinek

的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将编译你的JS模块从app/javascript/packs/application.js。您可以使用以下方式触发手动模块编译：

rails webpacker:compile

来源

2017-05-03 07:52:36 Tombart

使用Webpack导轨

回答

相关问题