我最近将webpacker和yarn添加到rails 5应用程序并执行 bundle exec webpacker:install:react
.
这安装了很多依赖,我在运行 bundle exec rake assets:precompile RAILS_ENV=production RAILS_SERVE_STATIC_FILES=enable SECRET_KEY_BASE=$(bundle exec rake secret)
时遇到了几个错误
uglifier 4.1.5
rails 5.1.4
ruby-2.4.0
yarn 1.3.2
node 9.4.0
我的config / initializers / assets.rb
# ...
Rails.application.config.assets.paths << Rails.root.join('node_modules')
Rails.application.config.assets.precompile += %w(*.js *.scss)
Rails.application.config.assets.precompile += %w(*.png *.woff2 *.woff *.ttf *.eot *.jpg *.gif *.svg *.ico)
我的config / environments / production.rb包括:
config.assets.js_compressor = Uglifier.new(harmony: true)
config.assets.css_compressor = :sass
作为临时解决方法,我在 .yarnclean
末尾添加了引发异常的文件:
# misc
*.md
*.jst
*.def
# specific files
jquery/src
# Uglifier::Error: Unexpected token: punc ({)}
ajv/dot
# .jst files
fbjs/flow
# Uglifier::Error: return outside of function
mkdirp/bin/cmd.js
node-gyp/bin/node-gyp.js
strip-indent/cli.js
webpack/bin/webpack.js
webpack-dev-server/bin/webpack-dev-server.js
但是,清理bin文件夹实际上是一个非常糟糕的主意,因为它打破了webpack本身:
/home/kupta/.rvm/gems/ruby-2.4.0@my-project/gems/webpacker-3.2.1/lib/webpacker/webpack_runner.rb:11:in `exec':
No such file or directory - ~/my-project/node_modules/.bin/webpack (Errno::ENOENT)
在资产预编译期间有任何智能方法来处理节点模块吗?我的资源文件夹增加了超过60 MB,我想阻止其中一些编译 .
先感谢您
编辑2018-02-09
我目前解决了样式表的问题,如下所示:
yarn add resolve-url-loader
然后我包含了这个解析器,它处理 config/webpacker/environment.js 中资产模块的字体,图像等的相对导入:
const { environment } = require('@rails/webpacker')
// resolve-url-loader must be used before sass-loader
environment.loaders.get('sass').use.splice(-1, 0, {
loader: 'resolve-url-loader',
options: {
attempts: 1
}
});
module.exports = environment
然后我创建了一个 application.sass
里面的** app / javascripts / packs`,我在其中导入节点库:
@import '~font-awesome/scss/font-awesome'
@import '~bootstrap/dist/css/bootstrap'
# --- and so on
不幸的是,我还没有找到捆绑相关.js文件的方法 . 我希望能够做类似于sprockets使用的 //= require
的东西
1 回答
解决方案甚至太容易了(在我弄明白之后) .
我的文件夹结构:
在
vendor.js
中,我刚刚导入了像import 'jquery/dist/jquery.js';
这样的库,并且所有这些库都被捆绑到 vendor.js 包中 .在
styles.js
我刚刚导入了像import 'font-awesome/scss/font-awesome.scss';
这样的库,所有这些库都捆绑到了 styles.css 包中 .所以不需要在我的资产路径中包含
node_modules
.(我记录了在this question about yarn到达这里的所有方式)