如何通过NPM在Laravel/Mix中正确引入tiny-slider？

问题根因 #

你之前的引入写法失效、目前出现重复引入的核心原因有两个：

• 你使用了import { tns }的命名导入语法，但tiny-slider的npm包主入口是默认导出，命名导入会拿到undefined，自然无法生效
• 你直接引入src目录下的源码，大多数前端构建工具默认不会编译node_modules内的依赖文件，源码中未转译的ES6+语法会在浏览器侧报错，导致功能异常
• 你目前的写法同时引入了src目录的源码和dist目录的打包产物，属于重复加载，确实不符合规范

正确引入方式 #

CSS引入（resources/scss/app.scss） #

你的CSS引入逻辑没问题，可以简化写法，sass-loader默认会自动解析node_modules内的依赖，无需写全相对路径：

@import 'tiny-slider/dist/tiny-slider.css';

JS引入（resources/js/app.js） #

直接引入tiny-slider打包后的默认导出即可，无需引用src目录源码，也无需额外加载dist目录的js文件：

// 用默认导入语法，不要用命名解构导入
import tns from 'tiny-slider'
// 如果需要在全局作用域（比如页面模板内的脚本）调用tns，再挂载到window，否则可以省略这行
window.tns = tns

引入完成后直接调用tns()即可正常初始化轮播组件，不会出现重复引入的问题。

内容的提问来源于stack exchange，提问作者Ali