13

我生成了一个新的 rails 应用程序： rails new titi --webpack=vue

并想使用 jQuery（或其他库，如 popper、vue-resource ...）。

我试过yarn add jquery哪个很好，但我无法在我的 JavaScript 代码中访问 jQuery。

在以前的 Webpacker gem 中，有更多的 conf 文件，我不得不将其写在shared.js：

module.exports = {
    ...
    plugins: [
      ...
      new webpack.ProvidePlugin({
          $: 'jquery',
          jQuery: 'jquery',
    ]
    ...
    resolve: {
      extensions: settings.extensions,
      modules: [
       resolve(settings.source_path),
        'node_modules'
      ],
      alias: {
        jquery: "jquery/src/jquery",
        vue: "vue/dist/vue.js",
        vue_resource: "vue-resource/dist/vue-resource",
    }
}

在当前 Webpacker 版本中包含库的最简洁方法是什么？里面的东西config/webpacker.yml？

4

3 回答 3

20

为Webpacker 3.5.0和bootstrap@4.1.1更新

Popper.js并且bootstrap@4.0.0不需要安装 JQuery。但是，Bootstrap 4 需要 JQuery 和 Popper.js，我认为这是在原始示例中展示它们的重点。此外，我在示例中省略了 Vue，因为有大量文档说明如何添加 Vue 连接。

为了让一切正常工作，我安装了webpack-merge, popper.js, jquery, jquery-ujs, 和bootstrap@4.1.1via Yarn。

安装后，我可以./config/webpack/environment.js使用以下代码进行更新：

/*
  ./config/webpack/environment.js
  Info for this file can be found
  github.com/rails/webpacker/blob/master/docs/webpack.md
*/

const { environment } = require('@rails/webpacker')
const merge = require('webpack-merge')
const webpack = require('webpack')

// Add an additional plugin of your choosing : ProvidePlugin
environment.plugins.prepend('Provide', new webpack.ProvidePlugin({
    $: 'jquery',
    JQuery: 'jquery',
    jquery: 'jquery',
    'window.Tether': "tether",
    Popper: ['popper.js', 'default'], // for Bootstrap 4
  })
)

const envConfig = module.exports = environment
const aliasConfig = module.exports = {
  resolve: {
    alias: {
      jquery: 'jquery/src/jquery'
    }
  }
}

module.exports = merge(envConfig.toWebpackConfig(), aliasConfig)

现在envConfig.toWebpackConfig()在 中的最后一条语句中使用了它，environment.js我需要将 , 更改development.js为以下内容：production.jstest.js

const environment = require('./environment')

module.exports = environment

然后在./app/javascript/application.js我添加了以下内容：

// ./app/javascript/application.js

/* eslint no-console:0 */
// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.
//
// To reference this file, add <%= javascript_pack_tag 'application' %> to the appropriate
// layout file, like app/views/layouts/application.html.erb

console.log('Hello World from Webpacker')

// JS libraries
import "jquery"
import "jquery-ujs"
import "bootstrap"

为了确保 JQuery 没有通过资产管道加载，我删除了 Rails 资产连接./app/assets/javascripts/application.js：

// require rails-ujs
// require_tree .

然后，我将这两行添加到headerin 部分./app/views/layouts/application.html.haml以显示 Webpack 内容：

= stylesheet_pack_tag 'application'
= javascript_pack_tag 'application'

在创建static_pages控制器和视图之后，在static_pages#index启动 Rails 服务器rails s（console.log(jQuery().jquery);一切都按预期加载。

文档可以在这里找到：https ://github.com/rails/webpacker/blob/master/docs/webpack.md

于 2017-09-14T05:49:18.297 回答
15

谢谢。这对 gem Webpacker 2 来说很好，但是新版本的 Gem 有一个新的文件组织并且需要更少的配置。

对于 Webpack 3，shared.js似乎不是强制性的。相反，我这样编写配置config/webpack/environment.js：

const { environment } = require('@rails/webpacker')

const webpack = require('webpack')

// Add an ProvidePlugin
environment.plugins.set('Provide',  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    jquery: 'jquery',
    'window.Tether': "tether",
    Popper: ['popper.js', 'default'],
    ActionCable: 'actioncable',
    Vue: 'vue',
    VueResource: 'vue-resource',
  })
)

const config = environment.toWebpackConfig()

config.resolve.alias = {
  jquery: "jquery/src/jquery",
  vue: "vue/dist/vue.js",
  vue_resource: "vue-resource/dist/vue-resource",
}

// export the updated config
module.exports = environment
于 2017-09-08T08:17:13.103 回答
0

@sknight 答案很好。但是如果您还没有包含它，我会添加一些缺少的配置。

  1. 在里面创建application.css文件，app/javascript/packs/application.css否则你会得到像Webpacker can't find application.css in ~/public/packs/manifest.json. Possible causes:
  2. 加入import "./application.css";_app/javascript/packs/application.js
  3. 添加import "bootstrap/dist/css/bootstrap.css";以app/javascript/packs/application.js在模板中使用引导类
于 2018-02-16T10:52:13.477 回答