0

我最近将 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 文件的方法。我希望能够做类似于//= require链轮使用的事情

4

1 回答 1

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在我的资产路径中。

（我记录了这个关于纱线的问题的所有方法）

于 2018-02-09T20:07:58.407 回答