javascript - webpack - 转译 1 ts 文件而不捆绑它(2 个条目)

Question

---

长话短说

(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 是 hell

---

编辑:添加文件:

// 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 inspect”的内容 $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

Answer 1

简而言之——您不需要打包器来转译单个 typescript 文件。只需使用 tsc。

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

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