Блог

Я хочу объединить приложение typescript react в качестве компонента в модуль ES или UMD. Но сгенерированный пакет ES создает недопустимый модуль js.

В связке это дает мне такие подсказки. Но я не могу найти для этого никакого решения.

 (!) Missing global variable names
Use output.globals to specify browser global variable names corresponding to external modules
http (guessing 'http')
...
 

внутри пакета esm js есть импорт, подобный этому:

 import http from 'http';
import https from 'https';
import url from 'url';
import require$0 from 'stream';
...

function createCommonjsModule(fn) {
  var module = { exports: {} };
    return fn(module, module.exports), module.exports;
}
 

И после добавления его в браузер:

 <script type="module" src="./index.esm.js"></script>
 

Я получил ошибку об отсутствующем относительном импорте:

 Uncaught TypeError: Failed to resolve module specifier "http". Relative references must start with either "/", "./", or "../".
 

У меня, конечно, есть ошибки в конфигурации накопительного пакета, но я не могу найти нужное место и рад и благодарен за любые подсказки.
…

Конечно, у меня есть импорт модулей узлов в моем приложении, например:

 import {observer} from 'mobx-react';
 

Но накопительный пакет должен справиться с этим. Не так ли?

Вот мой накопительный файл.config:

 import pkg from './package.json';
import nodeResolve from "@rollup/plugin-node-resolve";
import typescript from "rollup-plugin-typescript2";
import image from "@rollup/plugin-image";
import styles from "rollup-plugin-styles";
import commonjs from "@rollup/plugin-commonjs";
import replace from "@rollup/plugin-replace";
import json from '@rollup/plugin-json';
import babel from '@rollup/plugin-babel';
import copy from "rollup-plugin-copy";
import del from "rollup-plugin-delete";

export default {
    input: pkg.source,
    output: [
        {
            file: pkg.module,
            format: 'es',
            sourcemap: false
        },
        {
            file: "dist/index.umd.js",
            format: 'umd',
            sourcemap: true
        },
    ],
    plugins: [
        del({targets: 'dist/*'}),
        nodeResolve({
            mainFields: ['jsnext:main', 'module', 'main'],
            dedupe: [ 'react', 'react-dom' ]
        }),
        replace({
            preventAssignment: false,
            'process.env.NODE_ENV': JSON.stringify('development'),
            __buildDate__: () => JSON.stringify(new Date())
        }),
        json(),
        typescript(),
        styles(),
        copy({
            targets: [
                {src: 'public/**/*', dest: 'dist'}
            ]
        }),
        babel({ //disabled cause WebComponent integration
            presets: ["@babel/preset-react"],
            exclude: 'node_modules/**',
            babelHelpers: 'bundled'
        }),
        commonjs(),
        image()
    ]
};