javascript - webpack - transpilera 1 ts-fil utan att bunta den (2 poster)

Sammanfattning

(vue-filer) + background.ts => ...[webpack]... => (bundlade vue-filer) + background.js

  • kan inte köra background.js

  • förväntade att background.js endast skulle innehålla "console.log('test');"

Jag har ett Vue-projekt med webpack och TypeScript.

Jag vill att mitt byggsteg ska producera en "background.js"-fil utöver [vue JS-relaterade filer].

Jag har en källfil i TypeScript: "background.ts".

Genom vue.config.js lade jag till en webpack-ingång "background".

Det skapar faktiskt en fil "background.js" som jag hade förväntat mig

men det är buntat (tror jag) och det kan inte köras av ett Chrome-tillägg.

För tillfället vill jag bara ha en fil som heter "background.js" som kör instruktionen "console.log('test');" som den innehåller när skriptet anropas.

Tack, webpack är helvetet

redigera: lägga till filer:

// 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 },
            ]),
        ]
    }
}

innehåll av "$vue inspect" $vue inspect > https://pastebin.com/6F3zwLhC

Vad jag försökte:

  • exportera en funktion istället för min vanliga kod:

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

    // istället för bara

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

  • i slutet av filen lägger jag till detta eftersom jag såg det någonstans:

       export default null;

  • kontrollerade att min console.log fanns i background.js-buntade filen

  • klistrade in resultatet av background.js i navigatorn
  • lekte med den globala variabeln webpackJsonp som skripten skapar

Vad jag tänkte på:

  • ha ett npm-skript som först 1-buntar vue-webpack och sedan 2-transpilerar min fil med babel-loader

  • leker med bibliotekets utmatningsalternativ i webpack men jag tror att det gör koden tillgänglig för användning i en variabel, det kör inte automatiskt koden när den laddas

    • webpack-utdata i IIFE: https://webpack.js.org/configuration/output/#outputiife

Svar #1

Kort sagt - du behöver inte en bundler för att transpila en enskild TypeScript-fil. Använd bara tsc.

Specifikt för denna fråga där Vue-appen används som en del av ett Chrome-tillägg, kan det vara vettigt att separera byggandet av en app och filer relaterade till tillägget.

Ett annat möjligt alternativ är att använda något som Vue CLI Browser Extension Plugin.

Relaterade artiklar