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

Posted 2023-02-22

【中文标题】webpack - 在不捆绑的情况下编译 1 个 ts 文件（2 个条目）

【英文标题】：webpack - transpile 1 ts file without bundling it (2 entries)

【发布时间】：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。

【参考方案1】：

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

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

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