javascript - 找不到汇总模块 : Error: Can't resolve 'jquery'

Question

我正在尝试构建一个 vuejs 单文件组件并尝试将其与 rollup 捆绑在一起，但我收到错误 Module not found: Error: Can't resolve 'jquery '。我花了很多小时试图解决这个问题，但仍然无法弄清楚。

rollup.config.js

import babel from 'rollup-plugin-babel';
import minimist from 'minimist';
import uglify from 'rollup-plugin-uglify-es';
import vue from 'rollup-plugin-vue';

const argv = minimist(process.argv.slice(2));

const config = {
    input: 'src/index.js',
    output: {
        name: 'ExampleComponent',
        exports: 'named',
        globals: {
            jquery: 'jQuery',
        },
    },
    plugins: [
        vue({
            css: true,
            compileTemplate: true,
        }),
        babel({
            exclude: 'node_modules/**',
            externalHelpersWhitelist: [
                'defineProperties',
                'createClass',
                'inheritsLoose',
                'defineProperty',
                'objectSpread',
            ],
        }),
    ],
    external: ['jquery'],
};

// Only minify browser (iife) version
if (argv.format === 'iife') {
    config.plugins.push(uglify());
}

export default config;

index.js

// Import vue component
import component from '../src/main.vue';

// install function executed by Vue.use()
export function install(Vue) {
  if (install.installed) return;
  install.installed = true;
  Vue.component('ExampleComponent', component);
}

// Create module definition for Vue.use()
const plugin = {
  install,
};

// To auto-install when vue is found
let GlobalVue = null;
if (typeof window !== 'undefined') {
  GlobalVue = window.Vue;
} else if (typeof global !== 'undefined') {
  GlobalVue = global.Vue;
}
if (GlobalVue) {
  GlobalVue.use(plugin);
}

// To allow use as module (npm/webpack/etc.) export component
export default component;

package.json

{
  "main": "dist/example-component.umd.js",
  "module": "dist/example-component.esm.js",
  "unpkg": "dist/example-component.min.js",
  "scripts": {
    "build": "npm run build:unpkg & npm run build:es & npm run build:umd",
    "build:umd": "rollup --config build/rollup.config.js --format umd --file dist/vue-selectize.umd.js",
    "build:es": "rollup --config build/rollup.config.js --format es --file dist/vue-selectize.esm.js",
    "build:unpkg": "rollup --config build/rollup.config.js --format iife --file dist/vue-selectize.min.js"
  },
  "dependencies": {
    "tablesorter": "^2.31.0"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "rollup": "^0.65.2",
    "rollup-plugin-babel": "^3.0.7",
    "rollup-plugin-uglify-es": "0.0.1",
    "rollup-plugin-vue": "^4.3.2",
    "vue": "^2.5.17",
    "vue-template-compiler": "^2.5.17"
  }
}

ma​​in.vue

<template>
    <select>
        <slot></slot>
    </select>
</template>
<script>
    import $ from 'jquery'

    if (!$().tablesorter) {
        require('tablesorter')
    }

    export default {
        // more code here...
    }
</script>

Answer 1

您的开发依赖项中缺少 JQuery 模块，您可以使用以下命令安装它:

 npm i jquery --save-dev

--save-dev 选项将新安装的模块保存在 devDependencies

将来当你遇到类似缺少模块的问题时，你可以按如下方式安装它:

npm install missingModule --save-dev