如何在 webpack 中正确包含库?

Question

我正在使用带有webpack的Rails 6。我想使用库jquery-textcomplete，但我不知道如何将其包含在application.js文件中。

我的步骤：

1. 我已经安装了jquery-textcomplete到yarn add jquery-textcomplete
2. 我将其包含在application.js中，例如import 'jquery-textcomplete'或require('jquery-textcomplete')
3. 我在编译的js文件中看到一个库

但是我ncaught TypeError: $(...).textcomplete is not a function收到错误.如果我通过CDN包括它，一切都很好。 你能告诉我，我必须怎么做吗？请帮帮我。

我的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

我的application.js

require("@rails/ujs").start();
require("turbolinks").start();
require("@rails/activestorage").start();
require("channels");
require("jquery");
import 'jquery-textcomplete';

我的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"
}
}

Answer 1

这个解决方案帮助了我。我真的没有注意到我默认src路径

。