在Rollup.js中使用jQuery DataTables

Question

好的，我是第一次使用工具汇总，我喜欢它制作代码的规模很小。摇树很棒。但是，我很难让它正确地包含所有内容。我尝试过使用一个入口点exp.js，从这里从各种文件中导出内容：

export {
    dashboardCharts
} from './dashboard.js';

我的rollup.config.js看起来像

export default {
    // tell rollup our main entry point
    input: [
        'assets/js/exp.js',
    ],

    output: {
      name: 'helloworld',
      file: 'build/js/main.js',
        format: 'iife'
        // format: 'umd'
    },
    plugins: [
        resolve({
            // pass custom options to the resolve plugin
            customResolveOptions: {
              moduleDirectory: 'node_modules'
            }
        }),
        multiEntry()
        // terser(),
    ],
};

该文件dashboard.js包含datatables库，因此数据表包含在捆绑包main.js中。但是，数据表通过测试来测试是否应该采用commonjs路径

else if ( typeof exports === 'object' ) {
    // CommonJS
    module.exports = function (root, $) {

并且我试图在浏览器中执行此操作，因此我不希望使用commonjs路径。汇总的顶级范围声明为

var helloworld = (function (exports) {

因此导出最终是一个空对象，浏览器尝试执行commonjs路径，并且出现“模块未定义”错误。

我觉得我真的很接近，但是我在这里错过了一个简单的解决方案。我也尝试过使用umd格式而不是iife格式，但这没有帮助。我应该使用其他版本的数据表吗？

Answer 1

我使用了 svelte 的 rollup，并且我有一些 jquery 遗留的东西需要导入；我是这样做的：

\n

import svelte from 'rollup-plugin-svelte';\nimport resolve from 'rollup-plugin-node-resolve';\nimport commonjs from 'rollup-plugin-commonjs';\nimport livereload from 'rollup-plugin-livereload';\nimport { terser } from 'rollup-plugin-terser';\nimport postcss from 'rollup-plugin-postcss';\nimport autoPreprocess from 'svelte-preprocess';\nimport json from '@rollup/plugin-json';\n\nconst production = !process.env.ROLLUP_WATCH;\n\nexport default {\n    input: 'src/main.js',\n    output: {\n        sourcemap: true,\n        format: 'iife',\n        name: 'app',\n        file: 'public/build/bundle.js',\n    },\n    plugins: [\n        json(),\n        svelte({\n            // Enables run-time checks when not in production.\n            dev: !production,\n\n            // Extracts any component CSS out into a separate file \xe2\x80\x94 better for performance.\n            css: css => css.write('public/build/bundle.css'),\n\n            // Emit CSS as "files" for other plugins to process\n            emitCss: true,\n\n            preprocess: autoPreprocess()\n        }),\n\n        resolve({\n            browser: true,\n            dedupe: importee => importee === 'svelte' || importee.startsWith('svelte/')\n        }),\n        commonjs(),\n\n        postcss({\n            extract: true,\n            minimize: true,\n            use: [\n                ['sass', {\n                includePaths: [\n                    './src/theme',\n                    './node_modules'\n                ]\n                }]\n            ]\n        }),\n\n        // In dev mode, call `npm run start` once the bundle has been generated\n        !production && serve(),\n\n        // Watches the `public` directory and refresh the browser on changes when not in production.\n        !production && livereload('public'),\n\n        // Minify for production.\n        production && terser()\n    ],\n    watch: {\n        clearScreen: false\n    }\n};\n\nfunction serve() {\n    let started = false;\n\n    return {\n        writeBundle() {\n            if (!started) {\n                started = true;\n\n                require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {\n                    stdio: ['ignore', 'inherit', 'inherit'],\n                    shell: true\n                });\n            }\n        }\n    };\n}\n

\n

也许我发布的内容太多了（我想向您展示工作配置的上下文），但您可以从中提取所需的部分。\n我认为您需要commonjs插件。

\n