如何在后台导入和使用npm包.使用angular 10构建的chrome扩展的ts

Question

我正在使用angular 10创建一个谷歌chrome扩展。有没有可能在background.ts中导入npm包(transpiration-background.js之后(。如果有，那么我们如何导入并捆绑它，以便将它添加到manifest.json文件中。

我使用@angular builders/custom webpack包通过webpack将background.ts转换为background.js。

custom.webpack.config.js

const CopyWebPackPlugin = require('copy-webpack-plugin');
const path = require('path');
module.exports = {
plugins: [
new CopyWebPackPlugin({
patterns:[
{from:'manifest.json', to:''}            
]
}),
],    
entry: { background: 'src/background.ts' }    
}

angular.json

{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"testproject": {
"projectType": "application",
"schematics": {},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-builders/custom-webpack:browser",
"options": {
"customWebpackConfig": {
"path": "./custom.webpack.config.js"
},
"outputPath": "dist/testproject",
"index": "src/index.html",
"main": "src/main.ts",
.............
.............

Manifest.json

{
"name": "Great Extension",
"version": "1.0",
"description": "Build an Extension with Angular",
"manifest_version": 2,
"browser_action": {
"default_popup": "index.html#/home"
},
"key": <chrome extension key>,
"background": {
"scripts": [
"./background.js",
"./runtime.js"          
]
},
"permissions": [
"identity"
]
}

注意：runtime.js是在使用ng-build命令构建angular项目时创建的

Answer 1

我遇到了同样的问题，我通过在tsconfig.app.json 中的文件中添加background.ts解决了这个问题

{
...
"files": [
"src/main.ts",
"src/polyfills.ts",
"src/background.ts"
],
...
}