新的前端构建工具:laravel-mix
打赏作者

zhengdeshu

大神,你的PHPSTORM用的哪个THEME?

zhengdeshu 回复 JellyBool

非常感谢,回复这么快!

JellyBool 回复 zhengdeshu

哈哈哈,有看到就会回复的啦

mostwin

保存后不会自动构建,我是不是下载了假的laravel

JellyBool 回复 mostwin

npm run watch 这样应该不会错的吧。首先怀疑自己是不是操作不对

marlon

大神,windows中编译后js报错

Uncaught TypeError: Cannot read property 'csrfToken' of undefined
     at Object.<anonymous> (app.3df1225….js:27701)
     at __webpack_require__ (app.3df1225….js:20)
     at Object.<anonymous> (app.3df1225….js:971)
     at __webpack_require__ (app.3df1225….js:20)
     at Object.<anonymous> (app.3df1225….js:27722)
     at __webpack_require__ (app.3df1225….js:20)
     at app.3df1225….js:66
     at app.3df1225….js:69

目测是 resourses/assets/js/bootstrap.js 第31行 window.Laravel.csrfToken 未定义

github 上面相关作者给出的答案是在页面添加代码:

<script>
    window.Laravel = <?php echo json_encode([
        'csrfToken' => csrf_token(),
    ]); ?>
</script>

这目测很不科学,很不友好。大神有更好的解决方案吗?

JellyBool 回复 marlon

官方就是推荐这样做的啊。如何不友好

zhujie

想问一下,为什么我的phpstorm一直在mix这个地方有报错的问题。具体显示如下图。不不知道该怎么解决呢?
question

JellyBool 回复 zhujie

你设置一下你的 javascript 语法支持 es6 就好。

设置偏好》languages and framework 》javascript 》选择 es6

sevenhit

我发现npm run dev 报错
"dev": "node node_modules/cross-env/bin/cross-env.js 应该改为 “dev”: "node node_modules/cross-env/dist/bin/cross-env.js

JellyBool 回复 sevenhit

这个有可能是版本的问题

jerryhu 回复 sevenhit

你的问题解决了吗?我也遇到了这个错误 但是我也改了还是报错

jerryhu

运行npm 报错
Failed at the @ development script ‘cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js’.
node 和 npm 都是最新版本

JellyBool 回复 jerryhu

下面具体的报错信息呢

jerryhu 回复 JellyBool

问题解决了 nodejs版本问题 我把nodejs调低了版本就好了

13248269883 回复 jerryhu

你什么版本的,我也遇到了。。。。。

jerryhu 回复 13248269883

我安装的最新版本

y7ut123

npm安装这次竟然失败了。。

假如_丶

这样做有什么好处吗?没太理解…

JellyBool 回复 假如_丶

哪样做?改成 mix 还是什么?

假如_丶 回复 JellyBool

改成mix…

JellyBool 回复 假如_丶

因为使用 webpack 了啊。。。官方改的名字

y7ut123

为什么会这样啊- -困扰我一礼拜了,一礼拜之前出错,我就放弃这里看别的地方了
为什么。。

假如_丶 回复 y7ut123

我也出这个错误了。。。

JellyBool 回复 假如_丶

照着这个 package.json 更新一下,https://github.com/laravel/laravel/blob/master/package.json

删掉 node_modules 重新安装

假如_丶 回复 JellyBool

刚解决…用的cnpm

DTone 回复 假如_丶

怎么解决的呀?

假如_丶 回复 DTone

用cnpm下载依赖…

hyx18 回复 假如_丶

我也遇见这个问题了 没明白

Ruanjun

教主我在用laravel5.4安装element的时候产考了这个文章但是当我使用npm run dev的时候出现了错误,尝试了一些办法但是还是不知道问题出现在哪里

0 info it worked if it ends with ok
1 verbose cli [ 'F:\\node.js\\node.exe',
1 verbose cli   'C:\\Users\\Ruan0.0\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli   'run',
1 verbose cli   'dev' ]
2 info using npm@4.6.1
3 info using node@v7.9.0
4 verbose run-script [ 'predev', 'dev', 'postdev' ]
5 info lifecycle @~predev: @
6 silly lifecycle @~predev: no script for predev, continuing
7 info lifecycle @~dev: @
8 verbose lifecycle @~dev: unsafe-perm in lifecycle true
9 verbose lifecycle @~dev: PATH: C:\Users\Ruan0.0\AppData\Roaming\npm\node_modules\npm\bin\node-gyp-bin;D:\phpStudy\WWW\laravel_element\node_modules\.bin;C:\Program Files (x86)\Common Files\NetSarang;C:\Program Files (x86)\NVIDIA Corporation\PhysX\Common;C:\Program Files (x86)\Intel\iCLS Client\;C:\Program Files\Intel\iCLS Client\;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0\;C:\Program Files (x86)\Acer\abFiles\;C:\Program Files\Intel\Intel(R) Management Engine Components\DAL;C:\Program Files\Intel\Intel(R) Management Engine Components\IPT;C:\Program Files (x86)\Intel\Intel(R) Management Engine Components\DAL;C:\Program Files (x86)\Intel\Intel(R) Management Engine Components\IPT;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0\;C:\ProgramData\ComposerSetup\bin;D:\phpStudy\php\php-5.6.27-nts;D:\phpStudy\MySQL\bin;C:\bin\phpunit.phar;F:\Git\cmd;F:\Skype\Phone\;D:\phpStudy\redis;C:\Program Files\Microsoft SQL Server\130\Tools\Binn\;C:\Program Files\dotnet\;F:\cmder\;F:\redis server\;F:\node.js\;C:\Users\Ruan0.0\AppData\Roaming\Composer\vendor\bin;F:\phpStudy\php\php-5.6.27-nts;F:\phpStudy\php\php-5.6.27-nts;F:\Microsoft VS Code\bin;C:\Users\Ruan0.0\AppData\Roaming\npm
10 verbose lifecycle @~dev: CWD: D:\phpStudy\WWW\laravel_element
11 silly lifecycle @~dev: Args: [ '/d /s /c', 'npm run development' ]
12 silly lifecycle @~dev: Returned: code: 1  signal: null
13 info lifecycle @~dev: Failed to exec dev script
14 verbose stack Error: @ dev: `npm run development`
14 verbose stack Exit status 1
14 verbose stack     at EventEmitter.<anonymous> (C:\Users\Ruan0.0\AppData\Roaming\npm\node_modules\npm\lib\utils\lifecycle.js:279:16)
14 verbose stack     at emitTwo (events.js:106:13)
14 verbose stack     at EventEmitter.emit (events.js:194:7)
14 verbose stack     at ChildProcess.<anonymous> (C:\Users\Ruan0.0\AppData\Roaming\npm\node_modules\npm\lib\utils\spawn.js:40:14)
14 verbose stack     at emitTwo (events.js:106:13)
14 verbose stack     at ChildProcess.emit (events.js:194:7)
14 verbose stack     at maybeClose (internal/child_process.js:899:16)
14 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:226:5)
15 verbose pkgid @
16 verbose cwd D:\phpStudy\WWW\laravel_element
17 verbose Windows_NT 10.0.10586
18 verbose argv "F:\\node.js\\node.exe" "C:\\Users\\Ruan0.0\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js" "run" "dev"
19 verbose node v7.9.0
20 verbose npm  v4.6.1
21 error code ELIFECYCLE
22 error errno 1
23 error @ dev: `npm run development`
23 error Exit status 1
24 error Failed at the @ dev script.
24 error This is probably not a problem with npm. There is likely additional logging output above.
25 verbose exit [ 1, true ]
JellyBool 回复 Ruanjun

看不出来,最好的办法就是删掉 node_modules 目录,再重新 npm install

Ruanjun 回复 JellyBool

已经解决了是npm cache的问题

jayin 回复 Ruanjun

怎么解决的?

Ruanjun 回复 jayin

npm caceh clear 应该是这个命令,然后看一下element的安装文档有一个.blxxx文件要配置一下其他的基本没有什么问题了

Ruanjun
> @ development D:\phpStudy\WWW\laravel_element
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js

系统找不到指定的路径。
events.js:163
      throw er; // Unhandled 'error' event
      ^

Error: spawn node_modules/webpack/bin/webpack.js ENOENT
    at notFoundError (D:\phpStudy\WWW\laravel_element\node_modules\_cross-spawn@5.1.0@cross-spawn\lib\enoent.js:11:11)
    at verifyENOENT (D:\phpStudy\WWW\laravel_element\node_modules\_cross-spawn@5.1.0@cross-spawn\lib\enoent.js:46:16)
    at ChildProcess.cp.emit (D:\phpStudy\WWW\laravel_element\node_modules\_cross-spawn@5.1.0@cross-spawn\lib\enoent.js:33:19)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:215:12)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ development: `cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/w
ebpack.config.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ development script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Ruan0.0\AppData\Roaming\npm-cache\_logs\2017-05-26T08_07_24_887Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ dev: `npm run development`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Ruan0.0\AppData\Roaming\npm-cache\_logs\2017-05-26T08_07_30_932Z-debug.log
jayin

看不了视频这个

jayin

@JellyBool下载视频才看的 ,哈哈

jayin

@JellyBool你在广州吗?我也在广州,带带我,

JellyBool 回复 jayin

没有啊,我在深圳这边呢

jayin

这个好用自动刷新

mix.browserSync({
    proxy: 'my-domain.dev'
});
noikiy

为啥我在修改resource/assets/sass/app.scss文件之后 public/css/app.css 过好长时间才能反应过来? 是编译时顺便又把select2.min.css编译了一遍吗?

JellyBool 回复 noikiy

修改之后需要编译,这个很正常的。本地环境使用 run dev 稍微快一点点

noikiy

5.4中 有个路径是错的 在app.scss文件中 改成这样 @import “…/…/…/node_modules/bootstrap-sass/assets/stylesheets/bootstrap”;

JellyBool 回复 noikiy

这个应该没有错吧。。我这边使用的 5.4 貌似没有什么错误

noikiy

// Fonts
@import url(https://fonts.googleapis.com/css?family=Raleway:300,400,600);

// Variables
@import “variables”;

// Bootstrap
@import “node_modules/bootstrap-sass/assets/stylesheets/bootstrap”;

上面是原来的

我的laravel版本信息

Installing laravel/laravel (v5.4.23)

  • Installing laravel/laravel (v5.4.23): Loading from cache
    Created project in C:\Users\Administrator\Desktop\asdf\laravel

php -r "file_exists(’.env’) || copy(’.env.example’, ‘.env’);"
Loading composer repositories with package information
Updating dependencies (including require-dev)

这是我刚创建的项目 是路径有问题。

JellyBool 回复 noikiy

这样默认打包或出错么?

noikiy 回复 JellyBool

别人也遇到过 安装的laravel 这个路径 是没有加 …/…/…/的 我手动加上去的。 在homestead里运行命令 加不加这个路径好像不要紧; 在phpstorm里面运行watch 就需要加了,估计是这样 但是我还在研究 phpstorm里面watch 的error的拨错 ;安装完了sass 然后在file watcher里面配置;

JellyBool 回复 noikiy

额。。。你是说你直接在 phpstorm 运行 npm run 么?

这才是主要原因吧

noikiy 回复 JellyBool

是的!phpstorm里运行只要 点一下就 可以执行编译 要是要用命令行 也是可以的。
问题就是phpstorm在win里 在show npm script 里面点击development报错
D:\PhpStorm-2017.1.1\bin\runnerw.exe D:\Nodejs\node.exe D:\Nodejs\node_modules\npm\bin\npm-cli.js run development --scripts-prepend-node-path

@ development D:\phpStudy\Homestead\zhihu-app
cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js

‘cross-env’ �����ڲ����ⲿ���Ҳ���ǿ����еij���
���������ļ���

npm ERR! Windows_NT 6.1.7601
npm ERR! argv “D:\Nodejs\node.exe” “D:\Nodejs\node_modules\npm\bin\npm-cli.js” “run” “development” "–scripts-prepend-node-path"
npm ERR! node v6.10.2
npm ERR! npm v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! @ development: cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ development script ‘cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js’.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs
npm ERR! Or if that isn’t available, you can get their info via:
npm ERR! npm owner ls
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! D:\phpStudy\Homestead\zhihu-app\npm-debug.log

looky

求教!使用mix编译js后,js内调用的bootstrap的模态框组件方法$(’#myModal’).modal(‘show’)时,提示“.modal()”方法不存在。但如果不编译js,直接加载原始的js就没问题。该怎么做呢,谢谢。?

JellyBool 回复 looky

注意一下加载顺序和 bootstrap 的引入应该就 OK

looky

请帮我看看这个顺序可以不?抱拳。下面的是head部分

@yield('title')
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="{ mix('/static/app.css') }">
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/1000hz-bootstrap-validator/0.11.9/validator.min.js"></script>
<script src="https://cdn.bootcss.com/jquery_lazyload/1.9.7/jquery.lazyload.min.js"></script>
<script src="https://cdn.bootcss.com/store.js/1.3.20/store+json2.min.js"></script>

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
  <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>

下面部分是后面的内容:

<script src="{ mix('/static/app.js') }"></script>   <!-- 这里是我定义的js  -->
  <script src="//cdn.bootcss.com/prefixfree/1.0.7/prefixfree.min.js"></script>
  <script>
    $('#search_btn').click(function(){
      if($('#search_input').val() == ''){
        $('#search_input').focus();
        return false;
      }
    });
  </script>

------------------------------------
js里被模态框方法引用的函数:
function loginFail(info) {
    loginShowInfo('<span class="glyphicon glyphicon-remove icon fail-icon"></span> <br><span class="success-info">' + info + '</span> <br> <button type="button" class="btn btn-info" onclick="loginModalLoad">返回</button> <br><br>');
    $('#loginModal').modal('hide');
}
// 上面? 函数被同一个js引用的位置:
$('#registerModal .loginButton2').on('click', function() {
    ...
    $.post('/login', {email: emailElements.val(), password: passwordElements.val()}).
        done(function(data) {   // 登录成功
            console.log(data);
            loginSuccess();
        });
    });
JellyBool 回复 looky

感觉没有什么问题,你可以去掉下面这两个:

<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

然后在 laravel 的 assets/js/app.js 依次引入 jquery 和 bootstrap 就好

looky 回复 JellyBool

具体该怎么引入呢,有劳了,多谢多谢。

JellyBool 回复 looky
try {
    window.$ = window.jQuery = require('jquery');

    require('bootstrap-sass');
} catch (e) {}

注意引入 require(‘bootstrap’) 类似这种

looky 回复 JellyBool

抱拳抱拳

乔泓恺-Jone 回复 JellyBool

$ is not defined 在blade文件中使用jquery 一直报这个错误 是为什么呢?

JellyBool 回复 乔泓恺-Jone

你引入了 jquery 了么

bourne

总是一个bug解决要花很长时间啊,又碰到了,
Uncaught TypeError: $(…).select2 is not a function
at HTMLDocument. (create:160)
at c (app.js:29)
at l (app.js:29)
谁知道是什么鬼这个

JellyBool 回复 bourne

注意加载顺序和 jquery 也加载就好