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

2019年10月23日编辑。使用

可以解决上述问题

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

执行以下操作可以确保安装正确吗？

npm install @simonwep/pickr

然后在您希望使用pickr库的模块中，尝试通过将以下内容放在文件顶部来导入pickr库和相应的样式：

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

注意：根据他们的文档，您需要在CSS之后加载库的JavaScript。另外，请注意使用默认导入而不是命名导出。即

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);
})

希望有帮助！

Answer 2

我是Picker的维护者，

自1.4.5版本开始，如果您在打字稿中使用它，则应该有正式的类型声明。如Nathan所说，使用

import Pickr from '@simonwep/pickr';

是正确的，在打字稿中也应该起作用。检阅此codesanbox演示。如果您遇到任何问题，任何问题都可以得到解决。我还会用更多TS示例更新自述文件，因为似乎很多人都在使用picker + TS：）

不幸的是，我对汇总并不熟悉，如果您可以设法设置一个有效的模板，那么您可能会遇到问题。

未声明
Pickr.create是是错误。它将在下一个补丁程序版本中修复。

Answer 3

我在TypeScript 3.6上也遇到了同样的问题。

尝试使用'* as'导入

从'@ simonwep / pickr'导入*作为Pickr;

Pickr.create（{...}）方法正确执行。

npm模块无法导入

3 个答案: