我是使用laravel mix和Yarn(来自Codekit)的新手,所以请耐心等待!我的项目中有webpack.mix.js
文件,如下所示:
const mix = require('laravel-mix');
const tailwindcss = require('tailwindcss');
const purgeCss = require('laravel-mix-purgecss');
mix.postCss('./source/styles/styles.css', './public/assets/css/', [
tailwindcss('./tailwind.js'),
]);
mix.scripts([
'./source/scripts/app.js',
], './public/assets/js/app.js');
mix.copyDirectory('./source/fonts', './public/assets/fonts');
mix.copy('./source/images/', './public/assets/img/');
mix.copy('./source/root_files/', './public/');
mix.purgeCss({
enabled: true,
globs: [
path.join(__dirname, './public/*.html'),
path.join(__dirname, './public/assets/*.js'),
],
extensions: ['html', 'js', 'php'],
});
mix.browserSync({
proxy: 'something.loc',
files: [ './public/*.html', './public/assets/**/*.*' ]
});
这目前工作正常,做我想做的一切。
现在我想添加lodash.debounce
和lodash.throttle
,以便我可以在我的app.js
文件中使用这些函数。我已经使用yarn add
将它们添加到我的项目中,并且它们位于我的node_modules
文件夹中。
我的问题是我接下来该怎么办?我试过从index.js
文件夹中添加node_modules
文件,如下所示:
mix.scripts([
'./node_modules/lodash.debounce/index.js',
'./source/scripts/app.js',
], './public/assets/js/app.js');
这是使用yarn dev
构建的,但后来我的页面出现了控制台错误:ReferenceError: module is not defined
我是这种工作方式的新手所以它可能是显而易见的,感谢您的帮助!
UPDATE
我现在尝试在我的webpack.mix.js
文件中使用以下内容:
mix.js('./source/scripts/app.js', './public/assets/js/app.js');
并将此添加到我的/source/scripts/app.js
文件中:
const debounce = require('lodash.debounce');
const throttle = require('lodash.throttle');
window.onresize = _.debounce(() => {
console.log('resized!')
}, 100)
当我构建并打开控制台时,我收到此错误:
ReferenceError: _ is not defined
您应该在require
文件中使用source/scripts/app.js
。这通常是您应该为通过Yarn添加的任何JavaScript模块执行的操作。
// source/scripts/app.js
const debounce = require('lodash.debounce');
const throttle = require('lodash.throttle');
你得到的是告诉laravel-mix
你的申请有两个入口点。当它试图将这些文件转换为单个包时,它不知道如何处理lodash依赖中的module.exports语句,所以它只是将它留在那里,因此浏览器控制台错误。