简体   繁体   English

如何在 webpack 中正确包含库?

[英]How to right include library in webpack?

I am using Rails 6 with webpack.我正在使用带有 webpack 的 Rails 6。 I want to use library jquery-textcomplete , but I don't know how I must include it to application.js file.我想使用库jquery-textcomplete ,但我不知道如何将它包含到application.js文件中。

My steps:我的步骤:

  1. I've install jquery-textcomplete through yarn add jquery-textcomplete我已经通过yarn add jquery-textcomplete安装了jquery-textcomplete -textcomplete
  2. I am include this in application.js like as import 'jquery-textcomplete' or require('jquery-textcomplete')我将它包含在application.js中,例如import 'jquery-textcomplete'require('jquery-textcomplete')
  3. I see a library in a compiled js file我在编译的 js 文件中看到了一个库

But I getting an error ncaught TypeError: $(...).textcomplete is not a function .但是我收到一个错误ncaught TypeError: $(...).textcomplete is not a function If I include it through CDN all work fine.如果我通过CDN包含它,一切正常。 Can you please tell me, how I must to do?你能告诉我,我必须怎么做吗? Help me, please.请帮帮我。

my webpack/environment.js我的webpack/environment.js

const { environment } = require('@rails/webpacker')
const coffee =  require('./loaders/coffee')
const webpack = require('webpack')

environment.plugins.prepend('Provide',
    new webpack.ProvidePlugin({
        $: 'jquery/src/jquery',
        jQuery: 'jquery/src/jquery'
    })
)

environment.loaders.prepend('coffee', coffee)
module.exports = environment

my application.js我的application.js

require("@rails/ujs").start();
require("turbolinks").start();
require("@rails/activestorage").start();
require("channels");
require("jquery");

import 'jquery-textcomplete';

my package.json我的package.json

{
  "name": "my_app",
  "private": true,
  "dependencies": {
    "@rails/actioncable": "^6.0.0-alpha",
    "@rails/activestorage": "^6.0.0-alpha",
    "@rails/ujs": "^6.0.0-alpha",
    "@rails/webpacker": "^4.0.7",
    "coffee-loader": "^0.9.0",
    "coffeescript": "1.12.7",
    "jquery": "^3.4.1",
    "jquery-textcomplete": "^1.8.5",
    "turbolinks": "^5.2.0"
  },
  "version": "0.1.0",
  "devDependencies": {
    "webpack-dev-server": "^3.8.1"
  }
}

This solution helped me.这个解决方案帮助了我。 I really didn't notice what I had by default src path.我真的没有注意到我默认的src路径。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM