TypeScript - ماژول npm نمیتواند وارد شود

من یک پروژه تایپاسکریپت دارم و سعی دارم از پروژه زیر استفاده کنم: https://github.com/Simonwep/pickr

طبق توضیحات پروژه، من موارد زیر را انجام دادهام:

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

من این را نیز در یک فایل جداگانه اعلام کردم:

declare module '@simonwep/pickr';

حالا وقتی سعی میکنم از کتابخانه استفاده کنم، موارد زیر را در کنسول فایرفاکس میبینم:

TypeError: pickr_min_1 is undefined

ویرایش شده در ۲۳ اکتبر ۲۰۱۹. موفق شدم مشکل فوق را با استفاده از

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

من تازه وارد تایپاسکریپت و npm هستم، بنابراین مطمئن نیستم روش درست برای وارد کردن چنین پروژهای در پروژه تایپاسکریپت من چیست. هر کمکی قدردانی خواهد شد.

در زیر فایلهای تنظیمات من آمدهاند:

//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;

تنظیمات تولید:

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
            },

        ]
    }
];

پاسخ شماره ۱

من نگهدارندهٔ pickr هستم،

از نسخه 1.4.5 باید اظهارنامههای نوع رسمی وجود داشته باشد اگر شما از آن در تایپاسکریپت استفاده میکنید. همانطور که ناتان گفت، استفاده از

import Pickr from '@simonwep/pickr';

درست است، این همچنین باید در تایپاسکریپت هم کار کند. این دموی codesandbox را بررسی کنید. اگر با هرگونه مشکلی روبرو شدید، هر گونه مشکل/سوال مورد استقبال است. من همچنین فایل راهنما (Readme) را با مثالهای بیشتری از TS بهروزرسانی خواهم کرد، چون به نظر میرسد که بسیاری از افراد از pickr + TS استفاده میکنند :)

متأسفانه من با رولآپ آشنایی ندارم، اگر بتوانید یک قالب کاری راهاندازی کنید، میتوانید مسئلهای درباره اینکه چگونه این کار را انجام دادید مطرح کنید.

Pickr.create اعلام نشده است که یک اشکال است. این در نسخه وصله بعدی رفع خواهد شد.

پاسخ شماره ۲

میتوانید با اجرای یک دستور مطمئن شوید که نصب شما صحیح است:

npm install @simonwep/pickr

سپس در ماژولی که میخواهید از کتابخانه pickr استفاده کنید، سعی کنید کتابخانه pickr و استایلهای مربوطه را با قرار دادن موارد زیر در بالای فایل خود وارد کنید:

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

توجه: طبق مستندات آنها، شما نیاز دارید که جاوااسکریپت کتابخانه را بعد از 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);
})

امیدوارم که کمک کند!