在 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 库，因此 datatables 包含在包 main.js 中。但是，datatables通过测试来测试是否应该走commonjs路径

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

我正在尝试在浏览器中执行此操作，所以我不想要 commonjs 路径。 Rollup 的顶级作用域声明为

var helloworld = (function (exports) {

所以 export 最终是一个空对象，浏览器尝试执行 commonjs 路径，我们得到一个“模块未定义”错误。

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

Answer 1

我使用了 svelte 的汇总，并且我有一些 jquery legacy 可以导入；我是这样做的：

import svelte from 'rollup-plugin-svelte';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import livereload from 'rollup-plugin-livereload';
import { terser } from 'rollup-plugin-terser';
import postcss from 'rollup-plugin-postcss';
import autoPreprocess from 'svelte-preprocess';
import json from '@rollup/plugin-json';

const production = !process.env.ROLLUP_WATCH;

export default {
    input: 'src/main.js',
    output: {
        sourcemap: true,
        format: 'iife',
        name: 'app',
        file: 'public/build/bundle.js',
    },
    plugins: [
        json(),
        svelte({
            // Enables run-time checks when not in production.
            dev: !production,

            // Extracts any component CSS out into a separate file — better for performance.
            css: css => css.write('public/build/bundle.css'),

            // Emit CSS as "files" for other plugins to process
            emitCss: true,

            preprocess: autoPreprocess()
        }),

        resolve({
            browser: true,
            dedupe: importee => importee === 'svelte' || importee.startsWith('svelte/')
        }),
        commonjs(),

        postcss({
            extract: true,
            minimize: true,
            use: [
                ['sass', {
                includePaths: [
                    './src/theme',
                    './node_modules'
                ]
                }]
            ]
        }),

        // In dev mode, call `npm run start` once the bundle has been generated
        !production && serve(),

        // Watches the `public` directory and refresh the browser on changes when not in production.
        !production && livereload('public'),

        // Minify for production.
        production && terser()
    ],
    watch: {
        clearScreen: false
    }
};

function serve() {
    let started = false;

    return {
        writeBundle() {
            if (!started) {
                started = true;

                require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
                    stdio: ['ignore', 'inherit', 'inherit'],
                    shell: true
                });
            }
        }
    };
}

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