Я мог бы использовать здесь несколько полезных советов, новеньких для веб-пакетов и расширений Chrome и попытаться расширить этот проект:
https://github.com/chibat/chrome-extension-typescript-starter
Здесь определен jquery, и когда я запускаю npm install и npm run build, vendor.js создается с помощью jquery in. Я также хочу использовать bootstrap, я изменил package.json, чтобы включить bootstrap следующим образом:
"dependencies": {
"jquery": "~3.3.1",
"bootstrap":"^4.1.1", -- ADDED THIS
"moment": "~2.22.0"
},
"devDependencies": {
"@types/chrome": "~0.0.63",
"@types/jquery": "~3.3.1",
"@types/bootstrap":"^4.1.1", -- ADDED THIS
"ts-loader": "~4.2.0",
"typescript": "~2.8.1",
"webpack": "~4.5.0",
"webpack-cli": "~2.0.14",
"webpack-merge": "~4.1.2"
}
Я не уверен, какие изменения нужно внести в веб-пакет, так как там нет ничего специфичного для jquery, но когда я запускаю npm, запустите build vendor.js, не включающий загрузчик.
Я думаю, что я полностью ушел, предполагая, что package.json имеет ссылку на webpack.common.js, но все мои поиски в Google нашли статьи, говорящие о том, как поместить импорт начальной загрузки в app.js, а расширение chrome не имеет приложения. JS или любые строки для импорта JQuery или что-нибудь.
Извиняюсь за всеобщее, попросите ответа, но после долгих поисков я не уверен, и был бы признателен за изменения, которые мне нужно внести в webpack, чтобы это работало, вот существующий файл:
const webpack = require("webpack");
const path = require('path');
module.exports = {
entry: {
popup: path.join(__dirname, '../src/popup.ts'),
options: path.join(__dirname, '../src/options.ts'),
background: path.join(__dirname, '../src/background.ts'),
content_script: path.join(__dirname, '../src/content_script.ts')
},
output: {
path: path.join(__dirname, '../dist/js'),
filename: '[name].js'
},
optimization: {
splitChunks: {
name: 'vendor',
chunks: "initial"
}
},
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/
}
]
},
resolve: {
extensions: ['.ts', '.tsx', '.js']
},
plugins: [
// exclude locale files in moment
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
]
};