所以我尝试使用我提到的库(https://oss.mobilefirst.me/extension-cli/)安装jQuery,并得到了臭名昭著的$
not found错误。
经过研究,我证实Webpack是罪魁祸首。
答案就在这里:How to configure and use jQuery with webpack
但是,我不知道如何用这个库实现这个答案。
该库似乎使用NPX来虚拟化nodejs环境,只有从那里我才能运行xt-build,它以某种方式在幕后使用webpack来编译源代码。
我知道如果我手动添加jQuery,它就能正常工作,所以它肯定会因为xt-build的webpack部分而搞砸。
我如何修改webpack,使我仍然可以说npm run start
(这反过来又调用npx xt-build)和给予所需的提供程序插件修复,使jQuery可以工作?
我的package.json文件和相关代码如下:
"scripts": {
"start": "xt-build -e dev -w",
"start:firefox": "xt-build -e dev -p firefox -w",
"build": "xt-build -e prod",
"build:firefox": "xt-build -e prod -p firefox",
"clean": "xt-clean",
"docs": "xt-docs",
"test": "xt-test",
"coverage": "nyc --reporter=lcov npm run test",
"sync": "xt-sync"
},
"babel": {
"presets": [
"@babel/preset-env"
]
},
"eslintIgnore": [
"test/**/*"
],
"devDependencies": {
"extension-cli": "latest"
},
"xtdocs": {
"source": {
"include": [
"README.md",
"src"
]
}
},
"xtbuild": {
"js_bundles": [
{
"name": "background",
"src": "./src/background/**/*.js"
},
{
"name": "main",
"src": [
"./src/content/main.js"
]
},
{
"name": "injectors",
"src": [
"./src/injectors/start.js"
]
},
{
"name": "lib/jquery.min",
"src": "./node_modules/jquery/dist/jquery.min.js"
}
]
},
关于xtbuild的信息:https://oss.mobilefirst.me/extension-cli/03-xt-build/
更多关于它如何使用webpack的信息,请点击这里:https://oss.mobilefirst.me/extension-cli/03-xt-build-scripts/
有趣的注解:
这里有一个竞争对手库:https://github.com/dutiyesh/chrome-extension-cli
如果你看一下文件结构,他们给予你访问webpack.js.js文件的权限!也许我只需要换一个图书馆。
1条答案
按热度按时间wydwbb8l1#
好吧,我找到解决办法了。幸运的是,开发人员提供了一个复制文件的选项。我把我的xt-build配置改为:
注意copyAsIs命令。现在不幸的是,我不能告诉它我想在一个'lib'文件夹,但我会采取我能得到的。它会直接将其放到dist的根文件夹中。