I'm attempting to move my javascript files to Webpack.
(我正在尝试将JavaScript文件移至Webpack。)
I'm not very familiar with Webpack so I am not sure that I have coded any of this correctly.(我对Webpack不太熟悉,因此不确定我是否正确编写了其中的任何代码。)
I am trying to load jquery-ui, popper, and bootstrap 4. However, I am getting an error when requiring Popper
.(我正在尝试加载jquery-ui,popper和bootstrap4。但是,在需要Popper
时出现错误。)
Please note that I am using the Wepacker gem for Ruby on Rails.(请注意,我将Wepacker gem用于Ruby on Rails。)
I have included the following code in my environment.js file to include jQuery automatically in each file.
(我在我的environment.js文件中包含了以下代码,以在每个文件中自动包含jQuery。)
const { environment } = require('@rails/webpacker')
const webpack = require('webpack')
environment.plugins.append('Provide', new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
}))
module.exports = environment
This part works.
(这部分有效。)
So, from there I ran yarn add jquery-ui
.(因此,我从那里开始执行yarn add jquery-ui
。)
Then in my /pack/application.js file I included require('jquery-ui')
.
(然后,在我的/pack/application.js文件中,包含了require('jquery-ui')
。)
From my js file the following code prints to my console:
(从我的js文件中,以下代码打印到我的控制台:)
$(document).ready(function(){
if (jQuery.ui) {
console.log("loaded");
}
});
After this I tried installing and requiring popper
with yarn add popper
.
(这个我试过后安装,并要求popper
与yarn add popper
。)
Then calling popper from inside my document.ready
function I get an error:
(然后从document.ready
函数内部调用popper,我得到一个错误:)
$(document).ready(function(){
console.log(window.Popper)
});
The error:
(错误:)
Uncaught Error: Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /home/ubuntu/environment/node_modules/path-platform/path.js: 'return' outside of function (32:2)
30 | if (_path.posix) {
31 | module.exports = _path;
32 | return;
| ^
33 | }
34 |
35 | // resolves . and .. elements in a path array with directory names there
at Parser.raise (home/ubuntu/environment/node_modules/@babel/parser/lib/index.js:6420)
at Parser.parseReturnStatement
(home/ubuntu/environment/node_modules/@babel/parser/lib/index.js:10370)
at Parser.parseStatementContent
(home/ubuntu/environment/node_modules/@babel/parser/lib/index.js:10057)
at Parser.parseStatement (home/ubuntu/environment/node_modules/@babel/parser/lib/index.js:10009)
at Parser.parseBlockOrModuleBlockBody
(home/ubuntu/environment/node_modules/@babel/parser/lib/index.js:10585)
at Parser.parseBlockBody (home/ubuntu/environment/node_modules/@babel/parser/lib/index.js:10572)
at Parser.parseBlock (home/ubuntu/environment/node_modules/@babel/parser/lib/index.js:10556)
at Parser.parseStatementContent
(home/ubuntu/environment/node_modules/@babel/parser/lib/index.js:10085)
at Parser.parseStatement (home/ubuntu/environment/node_modules/@babel/parser/lib/index.js:10009)
at Parser.parseIfStatement
(home/ubuntu/environment/node_modules/@babel/parser/lib/index.js:10363)
at Parser.parseStatementContent
(home/ubuntu/environment/node_modules/@babel/parser/lib/index.js:10054)
at Parser.parseStatement (home/ubuntu/environment/node_modules/@babel/parser/lib/index.js:10009)
at Parser.parseBlockOrModuleBlockBody
(home/ubuntu/environment/node_modules/@babel/parser/lib/index.js:10585)
at Parser.parseBlockBody (home/ubuntu/environment/node_modules/@babel/parser/lib/index.js:10572)
at Parser.parseTopLevel (home/ubuntu/environment/node_modules/@babel/parser/lib/index.js:9940)
at Parser.parse (home/ubuntu/environment/node_modules/@babel/parser/lib/index.js:11447)
at parse (home/ubuntu/environment/node_modules/@babel/parser/lib/index.js:11483)
at parser (home/ubuntu/environment/node_modules/@babel/core/lib/transformation/normalize-file.js:168)
at normalizeFile (home/ubuntu/environment/node_modules/@babel/core/lib/transformation/normalize-file.js:102)
at runSync (home/ubuntu/environment/node_modules/@babel/core/lib/transformation/index.js:44)
at runAsync (home/ubuntu/environment/node_modules/@babel/core/lib/transformation/index.js:35)
at process.nextTick (home/ubuntu/environment/node_modules/@babel/core/lib/transform.js:34)
at process._tickCallback (internal/process/next_tick.js:61)
at Object../node_modules/path-platform/path.js (index.js:82)
at __webpack_require__ (bootstrap:19)
at Object.<anonymous> (index.js:1)
at Object../node_modules/parents/index.js (index.js:39)
at __webpack_require__ (bootstrap:19)
at Object.<anonymous> (index.js:19)
at Object../node_modules/module-deps/index.js (index.js:623)
at __webpack_require__ (bootstrap:19)
at Object.<anonymous> (index.js:3)
at Object../node_modules/browserify/index.js (index.js:846)
Here is my pack/application.js file
(这是我的pack / application.js文件)
require("@rails/ujs").start()
require("@rails/activestorage").start()
require('jquery-ui')
require('popper')
ask by Cannon Moyer translate from so