Question

我最近将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

然后我在** app / javascripts / packs`里面创建了一个application.sass，我导入了节点库：

@import '~font-awesome/scss/font-awesome'
@import '~bootstrap/dist/css/bootstrap'
# --- and so on

不幸的是，我还没有找到捆绑相关.js文件的方法。我希望能够做一些与sprockets

使用的//= require类似的东西

Answer 1

解决方案甚至太容易了（在我弄明白之后）。

我的文件夹结构：

app/javascripts/pack
|
|_ vendor.js
|
|_ styles.js

在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）

的所有方式

在预编译

编辑2018-02-09

1 个答案: