[英]Rails with Webpack
我正在使用ReactOnRails應用程序,我有node-modules
文件夾,包含使用npm
安裝的軟件包。 如何在app/assets/javascript/application.js
提供這些javascript庫,所以我不必在我的模塊和我的Gemfile
安裝jquery
?
這是我的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
}
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
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.