webpack - 在不捆绑的情况下编译 1 个 ts 文件（2 个条目）答案

【问题标题】：webpack - transpile 1 ts file without bundling it (2 entries)webpack - 在不捆绑的情况下编译 1 个 ts 文件（2 个条目）
【发布时间】：2020-07-20 01:14:09
【问题描述】：

TL;DR

（vue 文件）+ background.ts => ...[webpack]... =>（捆绑的 vue 文件）+ background.js

无法执行 background.js
预计 background.js 仅包含“console.log('test');”

我有一个带有 webpack 和 typescript 的 vue 项目。

除了 [vue JS 相关文件]，我希望我的构建步骤生成一个“background.js”文件。

我在 typescript 中有一个源文件：“background.ts”。

通过 vue.config.js 我添加了一个 webpack 条目“背景”。

它确实按照我的预期构建了一个文件“background.js”

但它是捆绑的（我认为），它不能由 chrome 插件执行。

现在我只想拥有一个执行“console.log('test');”的“background.js”文件调用脚本时包含的指令。

谢谢，webpack 是地狱

编辑：添加文件：

// vue.config.js
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
    filenameHashing: false,
    chainWebpack: config => {
        // add your custom entry point
        config
            .entry('background')
            .add('./src/background.ts');
    },
    configureWebpack: {
        plugins: [
            new CopyWebpackPlugin([
                { from: 'manifest.json', to: 'manifest.json', flatten: true },
            ]),
        ]
    }
}

“$vue 检查”的内容 $vue 检查 > https://pastebin.com/6F3zwLhC

我尝试了什么：

导出一个函数而不是我的纯代码：

export default function() {
    console.log("gboDebug: background.ts dans export function");
}

// 而不仅仅是

console.log("gboDebug: background.ts dans export function");

在文件末尾添加这个，因为我在某处看到它：
```
   export default null;
```
检查了我的 console.log 是否在 background.js 捆绑文件中
将 background.js 的结果粘贴到导航器中
使用脚本创建的 webpackJsonp 全局变量

我的想法：

有一个 npm 脚本，它 1-bundle-vue-webpack 然后用 babel-loader 2-transpile 我的文件
在 webpack 中使用库输出选项，但我认为它使代码可用于变量中，加载时不会自动执行代码
- IIFE 中的 webpack 输出：https://webpack.js.org/configuration/output/#outputiife

【问题讨论】：

如果您可以添加 webpack 配置代码本身会更有帮助
@GiorgiLagidze 谢谢vm的回答，我在这里添加了vue生成的webpack配置代码pastebin.com/6F3zwLhC
Vue 我们应该构建一个 Web 应用程序，它使用捆绑器 - Webpack。您想要的是构建一个 Web 应用程序并将其作为扩展程序运行，因此您需要将构建应用程序和构建扩展文件分开。你不需要 webpack 来处理background.ts，你可以简单地使用 ts 编译器 (tsc) 来处理。
请查看this question，看来 vue 生态系统可能已经为您的情况提供了解决方案
为什么要和巨龙战斗？我会简单地运行tsc 来单独转换background.ts。

标签： javascript typescript vue.js webpack

【解决方案1】：

简而言之——你不需要打包器来转换单个打字稿文件。只需使用tsc。

特别是对于将 Vue 应用程序用作 chrome 扩展程序的一部分的这个问题，将构建应用程序和扩展程序相关文件分开可能是有意义的。

另一种可能的选择是使用Vue CLI Browser Extension Plugin 之类的东西。

【讨论】：