webpack 如何使用扩展安装jQuery-谷歌Chrome扩展库

3z6pesqy  于 2023-10-19  发布在  Webpack
关注(0)|答案(1)|浏览(139)

所以我尝试使用我提到的库(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文件的权限!也许我只需要换一个图书馆。

wydwbb8l

wydwbb8l1#

好吧,我找到解决办法了。幸运的是,开发人员提供了一个复制文件的选项。我把我的xt-build配置改为:

"xtbuild": {
        "js_bundles": [
            {
                "name": "background",
                "src": "./src/background/**/*.js"
            },
            {
                "name": "main",
                "src": [
                    "./src/content/main.js"
                ]
            },
            {
                "name": "injectors",
                "src": [
                    "./src/injectors/start.js"
                ]
            }
        ],
        "copyAsIs": [ "./node_modules/jquery/dist/jquery.min.js"]
    },

注意copyAsIs命令。现在不幸的是,我不能告诉它我想在一个'lib'文件夹,但我会采取我能得到的。它会直接将其放到dist的根文件夹中。

相关问题