Javascript 未找到汇总模块：错误：Can'；t解决'；jquery'；

我正在尝试构建vuejs单文件组件，并尝试将其与

rollup

捆绑在一起，但遇到一个错误

未找到模块：错误：无法解析“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;

// 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;

index.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;

// 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"
  }
}

main.vue

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

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

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

从“jquery”导入$
如果（！$（）.tablesorter）{
require（'tablesorter'）
}
导出默认值{
//更多代码在这里。。。
}

如果开发依赖项中缺少

JQuery

模块，可以使用以下命令安装该模块：

 npm i jquery --save-dev

--保存开发

选项，将新安装的模块保存在

devDependencies

将来，当您遇到类似丢失模块的问题时，您可以按如下方式安装该模块：

npm install missingModule --save-dev

---

快速提问@boussadjra brahim，正如你所看到的，我有3个版本

iife

，

umd

，

esm

。当我测试我的组件时，比如

从“Example”导入Example

它会按预期工作。但是当我像

Vue.component（'example'，require（'example'））

那样使用它时，它会中断，但

Vue.component（'example'，require（'example'）.default）

会工作。这是ES6语法（

从'example'

导入示例）和

require（）

是一种旧语法，因此，调用

.default

属性可以解决我在package.json中认为的问题，

main

，用于commonjs

require（）

，

模块

用于

导入

，而

unpkg

用于直接链接脚本src中的min.js文件。我认为这就是三个构建的目的