添加yarn和webpacker后预编译出现几个错误

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。

（我在中记录了到达这里的所有方式）

添加yarn和webpacker后预编译出现几个错误

After adding yarn and webpacker several errors in precompilation

ruby-on-rails

sprockets

uglifier

yarnpkg

webpacker

编辑 2018-02-09