Модуль npm не может импортировать

Question

У меня есть проект TypeScript, и я пытаюсь использовать следующий проект: https://github.com/Simonwep/pickr

В соответствии с описанием проекта я сделал следующее:

import '@simonwep/pickr/dist/themes/nano.min.css';      // 'nano' theme
import {Pickr} from '@simonwep/pickr';

Я также объявилэто в отдельном файле:

declare module '@simonwep/pickr';

Теперь, когда я пытаюсь использовать библиотеку, в консоли Firefox я вижу следующее:

TypeError: pickr_min_1 is undefined

Отредактировано 23 октября 2019. Удалось исправить вышеуказанноеиспользуя

import Pickr from '@simonwep/pickr';

Теперь, когда я пытаюсь построить проект, я вижу следующую ошибку:

[!] Error: 'default' is not exported by node_modules\@simonwep\pickr\dist\pickr.
min.js
https://rollupjs.org/guide/en/#error-name-is-not-exported-by-module

Я новичок в Typescript и npm, так что теперь убедитесь, что правильный подходимпортировать такой проект в моем проекте TypeScript. Любая помощь будет оценена.

Ниже приведены мои конфигурационные файлы:

//dev conf
import commoncfg from './conf-common';
import serve from 'rollup-plugin-serve';
import livereload from 'rollup-plugin-livereload';
import copy from 'rollup-plugin-cpy';
import staticSite from 'rollup-plugin-static-site';

commoncfg[0].plugins.push(
    staticSite({
        template: { path: 'test.html' },
        dir: 'dist'
    }),
    copy({
        files: ['*.jpg'],
        dest: 'dist'
    }),
    serve('dist'),
    livereload()
);
// only generate UMD during dev
commoncfg[0].output.splice(0, 1);
commoncfg.pop();

export default commoncfg;

prod conf:

import { terser } from "rollup-plugin-terser";
import copy from 'rollup-plugin-cpy';

import commoncfg from './conf-common';


commoncfg[0].plugins.push(
    terser(),
    copy({
        files: ['LICENSE', 'README.md'],
        dest: 'dist'
    }),
    );
commoncfg[0].output.pop();
commoncfg[1].plugins.push(
    terser(),
);

export default commoncfg;

conf-common.js:

import pkg from './package.json';
import del from 'rollup-plugin-delete';
import typescript from 'rollup-plugin-typescript2';
import svgo from 'rollup-plugin-svgo';
import generatePackageJson from 'rollup-plugin-generate-package-json'
import postcss from 'rollup-plugin-postcss';
import commonjs from 'rollup-plugin-commonjs';
import nodeResolve from 'rollup-plugin-node-resolve';

const outputDir = "./dist/";

let leanPkg = Object.assign({}, pkg);
leanPkg.scripts = {};
leanPkg.devDependencies = {};

const banner = 
`/* **********************************
Test
********************************** */`;

export default [
    {
        input: 'src/index.ts',
        plugins: [
            del({ targets: 'dist/*' }),
            typescript({
                useTsconfigDeclarationDir: true,
        clean: true
            }),
    nodeResolve(),
    commonjs({
      include: 'node_modules/**',  // Default: undefined
      sourceMap: true,  // Default: true
      namedExports: { 'node_modules/@simonwep/pickr' :['pickr'] }
    }),
            postcss(),
            svgo(),
            generatePackageJson({
                baseContents: leanPkg
            })],
        output: [
            {
                file: outputDir + pkg.module,
                format: 'es',
                banner: banner,
            },
            {
                file: outputDir + pkg.main,
                name: pkg.name,
                format: 'umd',
                sourcemap: true,
                banner: banner,
            },
        ]
    },
    {
        input: 'src/index.ts',
        plugins: [
            typescript({
                useTsconfigDeclarationDir: true,
        clean: true
            }),
            postcss({
          extensions: [ '.css' ]

        }),
            svgo(),
            generatePackageJson({
                baseContents: leanPkg
            })],
        output: [
            { 
                file: outputDir + pkg.main, 
                name: pkg.name, 
                format: 'umd',
                banner: banner
            },

        ]
    }
];

Answer 1

Я сопровождающий pickr,

начиная с версии 1.4.5 должны быть официальные объявления типов, если вы используете их в машинописи. Как сказал Натан, использование

import Pickr from '@simonwep/pickr';

правильно, это также должно работать в машинописи. Оформить заказ codesanbox демо. Если вы столкнулись с какими-либо проблемами, любые вопросы / вопросы приветствуются. Я также дополню файл Readme новыми примерами TS, так как кажется, что многие люди используют pickr + TS:)

К сожалению, я не знаком с накопительным пакетом, если вам удастся настроить рабочий шаблон, который выможет поставить вопрос о том, как вы это сделали.

Pickr.create не объявлен, что является ошибкой. Это будет исправлено в следующей версии патча.

Answer 2

Можете ли вы убедиться в правильности установки, выполнив:

npm install @simonwep/pickr

, затем в своем модуле, где вы хотите использовать библиотеку pickr, попробуйте импортировать библиотеку pickr и соответствующий стиль, вставивв верхней части файла:

import '@simonwep/pickr/dist/themes/nano.min.css';      // 'nano' theme
import Pickr from '@simonwep/pickr';

Примечание : в соответствии с их документацией вам необходимо загрузить JavaScript библиотеки после CSS. Также обратите внимание на использование импорта по умолчанию в отличие от именованного экспорта. то есть

import Pickr from '@simonwep/pickr';

вместо:

import { Pickr } from '@simonwep/pickr';

Теперь в вашем модуле вам нужно создать экземпляр объекта pickr, чтобы использовать его, что-то вроде:

const pickr = Pickr.create({
    el: '.color-picker',
    theme: 'classic', // or 'monolith', or 'nano'

    swatches: [
        'rgba(244, 67, 54, 1)',
        'rgba(233, 30, 99, 0.95)',
        'rgba(156, 39, 176, 0.9)',
        'rgba(103, 58, 183, 0.85)',
        'rgba(63, 81, 181, 0.8)',
        'rgba(33, 150, 243, 0.75)',
        'rgba(3, 169, 244, 0.7)',
        'rgba(0, 188, 212, 0.7)',
        'rgba(0, 150, 136, 0.75)',
        'rgba(76, 175, 80, 0.8)',
        'rgba(139, 195, 74, 0.85)',
        'rgba(205, 220, 57, 0.9)',
        'rgba(255, 235, 59, 0.95)',
        'rgba(255, 193, 7, 1)'
    ],

    components: {

        // Main components
        preview: true,
        opacity: true,
        hue: true,

        // Input / output Options
        interaction: {
            hex: true,
            rgba: true,
            hsla: true,
            hsva: true,
            cmyk: true,
            input: true,
            clear: true,
            save: true
        }
    }
});

Затем вы можете подключиться к любому из событий, инициируемых объектом pickr, используя такие обработчики событий, как:

pickr.on('init', instance => {
    console.log('init', instance);
}).on('hide', instance => {
    console.log('hide', instance);
}).on('show', (color, instance) => {
    console.log('show', color, instance);
})

Надеюсь, это поможет!