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中。但是，数据表通过测试

来测试是否应该采用commonjs路径

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

，并且我试图在浏览器中执行此操作，所以我不需要commonjs路径。汇总的顶级范围声明为

var helloworld = (function (exports) {

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

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

Answer 1

我使用svelte进行汇总，并且有一些要导入的jQuery传统；这是我的操作方式：

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插件。

在Rollup.js中使用jQuery DataTables

1 个答案: