Laravel mix / webpack 不会在通过 babel() 编译的脚本上触发监视功能

Posted 2023-03-14

【中文标题】Laravel mix / webpack 不会在通过 babel() 编译的脚本上触发监视功能

【英文标题】：Laravel mix / webpack not triggering the watch functionality on scripts compiling through babel()

【发布时间】：2019-06-29 01:19:16

【问题描述】：

我们通过 Laravel mix 提供的 babel() 功能运行我们的一些 javascript 文件，以实现一些向后兼容性。

我们遇到的问题是，如果我们更改 app.js 或 app.scss 中的任何内容，watch 脚本会被触发，Laravel mix 会自动编译正确的脚本，但它不会触发任何文件中的任何更改我们输入babel()。我们运行watch 或watch-poll 都没有关系。如果我们手动重新运行 watch，或者如果我们运行生产/开发，它会编译 babel() 脚本。

我试图在 babel() 或 watch 上找到解释这种奇怪行为的文档。但找不到任何解释这个奇怪问题的东西。

webpack.mix.js

mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css')
// Compile some resources independently to not include it in all pages.
.babel('resources/assets/js/cart.js', 'public/js/cart.js')
.babel('resources/assets/js/manage-addresses.js', 'public/js/manage-addresses.js')
.babel('resources/assets/js/catalog-overview-order.js', 'public/js/catalog-overview-order.js');

package.json

"scripts": 
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    ,

软件版本：

NPM：6.4.1 Node.js：8.12.0 Webpack：4.29.0 Laravel：5.5 Laravel 混合：4.0.14 操作系统：Ubuntu 18.04 php：7.0.30 Docker：18.09.1，构建 4c52b90

package.json

    "private": true,
    "scripts": 
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    ,
    "devDependencies": 
        "@fortawesome/fontawesome-free": "^5.5.0",
        "axios": "^0.17",
        "bootstrap": "^4.1.3",
        "cross-env": "^5.1",
        "datatables": "^1.10.18",
        "datatables.net-bs4": "^1.10.19",
        "datatables.net-buttons-bs4": "^1.5.3",
        "datatables.net-plugins": "^1.10.18",
        "datatables.net-rowreorder": "^1.2.5",
        "datatables.net-rowreorder-bs4": "^1.2.5",
        "jquery": "^3.2",
        "laravel-mix": "^4.0.14",
        "popper.js": "^1.14.6",
        "resolve-url-loader": "^2.3.1",
        "sass": "^1.16.1",
        "sass-loader": "^7.1.0",
        "vue-template-compiler": "^2.5.22"
    ,
    "dependencies": 
        "@babel/polyfill": "^7.2.5",
        "animate.css": "^3.7.0",
        "bootstrap4-notify": "^4.0.3",
        "dropzone": "^5.5.1",
        "jquery-mask-plugin": "^1.14.15",
        "select2": "^4.0.5",
        "toastr": "^2.1.4"
    

【参考方案1】：

你应该有 mix.js() 和一些输入到 babel。

mix.js('resources/assets/js/cart.js', 'public/js/cart.js').babel('public/js/cart.js', 'public/js/cart.js')

【讨论】：

今天早上我花了一两个小时来研究这个问题。谢谢！

一个小时后，我仍然卡住了。我不能使用 .js，因为我正在组合遗留代码......除非我使用 .combine、.scripts 或 .babel 手表仍然什么都不做！如果我在 1 个没有任何依赖项的文件上使用 .js ，则手表可以工作，但我不能使用 .js 来满足我的需要。我被困住了

如果有人感兴趣，原来它正在重新编译.. 只是没有告诉我它就像使用.js时一样

谢谢你！我在没有 js() 的情况下使用 babel()，这就是问题所在！