首页 文章

在预编译中添加yarn和webpacker几个错误之后

提问于
浏览
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文件的方法 . 我希望能够做类似于sprockets使用的 //= require 的东西

1 回答

  • 0

    解决方案甚至太容易了(在我弄明白之后) .

    我的文件夹结构:

    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到达这里的所有方式)

相关问题