如何使用Laravel Mix将

时间:2019-03-07 16:52:12

标签: javascript lodash yarnpkg laravel-mix

我是第一次使用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.debouncelodash.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

我是这种工作方式的新手,所以这很明显,谢谢您的帮助!

更新

我现在尝试在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

1 个答案:

答案 0 :(得分:1)

您应该在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语句,因此将其留在那里,从而导致浏览器控制台错误。