Laravel - 使用 typescript 和 Laravel Mix 构建 JS 库答案

【问题标题】：Laravel - Building a JS library using typescript and Laravel MixLaravel - 使用 typescript 和 Laravel Mix 构建 JS 库
【发布时间】：2019-12-07 08:37:45
【问题描述】：

我有一个用 Typescript 编写的函数，我想将其作为库提供。

我正在使用 Laravel Mix 和 babel ts 加载器将 .ts 文件转换为 .js 文件。

但是，即使找到文件也无法使用功能时：

<script type="module">
    import getCardInfo from '/js/main.js';
    console.log(getCardInfo)
</script>

收到的错误是：

The requested module '/js/main.js' does not provide an export named 'default'

资源/cardActions.ts：

export default function getCardInfo() {
    console.log("getting card info");
}

我的 webpack.mix.js 是：

mix.ts('resources/cardActions.ts', 'public/js')
mix.webpackConfig({
    entry: './public/js/cardActions.js',
    output: {
        path: path.resolve(__dirname, 'public'),
        filename: 'js/main.js',
        libraryTarget: 'window'
    }
})

【问题讨论】：

import {getCardInfo} from '/js/main.js'; 试试这个导入语句
不幸的是，同样的交易：The requested module '/js/main.js' does not provide an export named 'createNewItem'
能否提供您的 .ts 文件内容。我想你忘了在那里导出getCardInfo 函数。
当然。更新了，问题是我在编译的main.js中看到了这个函数，但是我就是不能使用这个函数
你能解决这个问题吗？我正在尝试在 Laravel 中将 Vue 与 typescript 一起使用，但我不知道。

标签： javascript laravel typescript

【解决方案1】：

你必须让这段代码通过webpack，

<script type="module">
    import getCardInfo from '/js/main.js';
    console.log(getCardInfo)
</script>

不是mix.ts('resources/cardActions.ts', 'public/js')

是mix.ts('resources/Your_script_import_code_file.ts', 'public/js')

那么webpack可以同时编译import_file和export_file！

【讨论】：

如果您也能解释一下您的解决方案，那就太好了。到目前为止，它非常难以阅读。