分类 JavaScript 下的文章

Laravel mix + TailwindCSS 运行 npm run watch 无限重新编译 CSS

作者: Chuwen
时间: 2022-05-21
分类: JavaScript
评论

先说答案，参考的是：https://github.com/laravel-mix/laravel-mix/issues/1942

## 序言

最近在筹划着本博客新主题设计，想运用现代化前端技术，再加之对 Laravel mix 有一定的使用经验，所以选择了 Laravel mix 作为脚手架

## 问题

`webpack.mix.js` 配置：

```js
const mix         = require('laravel-mix');
require('mix-tailwindcss');

mix.disableSuccessNotifications()
    .ts('src/app.ts', 'theme/assets')
    .setPublicPath('theme/assets')
    .sass("src/assets/sass/app.scss", "theme/assets")
    .tailwind('./tailwind.config.js')
    .webpackConfig({
      module: {
        rules: [
          {
            test:    /\.tsx?$/,
            loader:  "ts-loader",
            exclude: /node_modules/
          }
        ]
      }
    })

mix.browserSync({
  proxy: '127.0.0.1:3792',
  files: ["theme/**/*.php", "src/*.js", "src/*.css"],
  open:  false
})
```

`tailwind.config.js` 配置：
```js
module.exports = {
  content: require('fast-glob').sync([
    './src/**/*.{html,js,ts}',
    './node_modules/tw-elements/dist/js/**/*.js',
    './theme/**/*.php'
  ]),
  theme:   {
    extend: {},
  },
  plugins: [
    require('tw-elements/dist/plugin')
  ],
}
```

使用上述的配置，然后运行 `npm run watch`，就看到终端一直闪烁着编译结果，然后电脑风扇呼呼狂啸：
![](https://cdn.nowtime.cc/2022/05/21/912061657.png)

## 解决方案

还好我用 Google + 英文搜索（用的蹩脚英文 ?），然后找到了这个 **issues**：
https://github.com/laravel-mix/laravel-mix/issues/1942

翻啊翻，发现这个人给出的解决方案是可行的：https://github.com/laravel-mix/laravel-mix/issues/1942#issuecomment-998148038

1. 首先安装 `glob`
 - npm：`npm install fast-glob -D`
 - yarn：`yarn add fast-glob -D`

2. 然后将 `tailwind.config.js` 改为：

```js
module.exports = {
    // 看这里
    content: require('fast-glob').sync([
    './src/**/*.{html,js,ts}',
    './node_modules/tw-elements/dist/js/**/*.js',
    './theme/**/*.php'
    ]),
    theme: {
        extend: {},
    },
    plugins: [],
}
```

然后就完美解决了

Swiper.js 报错: Uncaught TypeError: Cannot read properties of undefined (reading 'onTouchEnd') at Swiper.onTouchEnd

作者: Chuwen
时间: 2021-11-30
分类: JavaScript
评论

解决 Swiper.js 无限滚动（跑马灯）手动滑动后会干扰移动效果

作者: Chuwen
时间: 2021-11-30
分类: JavaScript
评论

### 预期效果

向左、向右滑动后，松开鼠标/手，必须按照初始移动方向移动，并且移动速度不能有太大的变化

### 解决办法就是：

设置 `freeMode.momentumRatio` 设置的小一点，比如 `0.01`
设置 `freeMode.momentumBounce` 为 `false`

在线预览：https://codepen.io/printnow/pen/ZEXEajW

** freeMode** 参数：

| 参数                                                         | 类型                        | 默认值 | 备注                                                         |
| ------------------------------------------------------------ | --------------------------- | ------ | ------------------------------------------------------------ |
| [enabled](https://swiperjs.com/swiper-api#param-freeMode-enabled) | `boolean | FreeModeOptions` |        启用自由模式功能。对象的自由模式参数或布尔值为 `true` 以启用默认设置。 |
| [minimumVelocity](https://swiperjs.com/swiper-api#param-freeMode-minimumVelocity) | `number`                    | 0.02   | 触发自由模式动量所需的最小接触移动速度                       |
| [momentum](https://swiperjs.com/swiper-api#param-freeMode-momentum) | `boolean`                   | true   | 如果启用，则在释放滑块后，滑块将继续移动一段时间             |
| **[momentumBounce](https://swiperjs.com/swiper-api#param-freeMode-momentumBounce)** | `boolean`                   | true   | 如果要在自由模式下禁用动量反弹，请设置为 `false`             |
| [momentumBounceRatio](https://swiperjs.com/swiper-api#param-freeMode-momentumBounceRatio) | `number`                    | 1      | 值越大，动量反弹效应越大                                     |
| **[momentumRatio](https://swiperjs.com/swiper-api#param-freeMode-momentumRatio)** | `number`                    | 1      | 释放滑块后，该值越大，动量距离越大                           |
| [momentumVelocityRatio](https://swiperjs.com/swiper-api#param-freeMode-momentumVelocityRatio) | `number`                    | 1      | 释放滑块后，该值越高，动量速度越大                           |
| [sticky](https://swiperjs.com/swiper-api#param-freeMode-sticky) | `boolean`                   | false  | 设置为 `true` 可在自由模式(`freeMode`)下启用捕捉幻灯片位置   |

### JS 代码：

> 如果你是按照模块导入的，一定要导入 `FreeMode` 模块！

```js
import 'swiper/css';
import Swiper, {Autoplay, FreeMode} from 'swiper';

Swiper.use([Autoplay, FreeMode]);

let itemCount = parseInt(u('.swiper-wrapper').data('item-count'));

const swiper = new Swiper("#reviews-list", {
  width: window.innerWidth,
  resistanceRatio: 0,
  speed: 10000,
  observer: true,
  observeParents: true,
  slidesPerGroup: 1,

// autoplay
  autoplay: {
    delay: 0, // 每个图片移动完成后间隔
    disableOnInteraction: false // 触摸后是否停止自动移动
  },

freeMode: {
    enabled: true,
    momentumBounce: false,//主要是这2个参数
    momentumRatio: 0.01//主要是这2个参数
  }, // 不贴合

// loop
  loop: true, // 循环

// grid
  centeredSlides: true,
  slidesPerView: 'auto',//5
  spaceBetween: 25,
  loopedSlides: itemCount,
  loopAdditionalSlides: itemCount,
});
```

#### HTML 代码例子：
```html
<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Swiper.js 无限跑马灯</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@7.3.1/swiper-bundle.min.css"/>
  <script src="https://cdn.jsdelivr.net/npm/swiper@7.3.1/swiper-bundle.min.js"></script>
  <style>
    #review-list {
      width: 100%;
      height: 100%;
    }

.review-item {
      width: 300px;
      height: 180px;
      background-color: #ff4081;
      color: white;
      display: flex;
      align-items: center;
      justify-content: space-around;
    }
  </style>
</head>
<body>

// autoplay
    autoplay: {
      delay: 0, // 每个图片移动完成后间隔
      disableOnInteraction: false // 触摸后是否停止自动移动
    },

freeMode: {
      enabled: true,
      momentumBounce: false,
      momentumRatio: 0.01,
      momentumVelocityRatio: 0.01
    }, // 不贴合

// loop
    loop: true, // 循环

// grid
    centeredSlides: true,
    slidesPerView: 'auto',//5
    spaceBetween: 25,
  });
</script>
</body>
</html>
```

Vue.js 组件 script 分离

作者: Chuwen
时间: 2021-10-14
分类: Vue.js
评论

Vue.js 下拉框组件当点击菜单栏外的时候关闭菜单

作者: Chuwen
时间: 2021-08-23
分类: Vue.js,JavaScript
评论

Laravel mix + TailwindCSS 运行 npm run watch 无限重新编译 CSS

Swiper.js 报错: Uncaught TypeError: Cannot read properties of undefined (reading 'onTouchEnd') at Swiper.onTouchEnd

解决 Swiper.js 无限滚动（跑马灯）手动滑动后会干扰移动效果

Vue.js 组件 script 分离

Vue.js 下拉框组件当点击菜单栏外的时候关闭菜单

最新文章

最近回复

分类

归档

其它