Блог

У меня есть библиотека, которую я разрабатываю на typescript. У меня есть решение для ее сборки через tsc, чтобы использовать ее в качестве пакета npm, но tsc передает каждый файл по отдельности. Я хотел бы использовать webpack для создания всего пакета в одном уменьшенном файле, но это не работает. Я провел несколько тестов (создал простой пакет в JS с помощью module.exports / require, и это сработало, пакет JS, который не удался с использованием синтаксиса экспорта / импорта es6), поэтому я думаю, что я исхожу из синтаксиса импорта / экспорта typescript… Но я ожидал, что загрузчик (я пробовал ts-loader и awesome-ts-loader) переведет его, но в каждом случае, когда я пытаюсь импортировать пакет в комплекте, он всегда возвращает «undefined».

это мой файл tsconfig.json:

 {
    "compilerOptions": {
        "declaration": true,
        "outDir": "./dist/",
        "sourceMap": true,
        "noImplicitAny": true,
        "module": "es6",
        "target": "es6",
        "resolveJsonModule": true,
        "moduleResolution": "node"
    },
    "exclude": [
        "node_modules"
    ]
}
  

(для модуля и цели я попытался перейти на commonjs для модулей и более старых целей, но это ничего не меняет ….)

Вот конфигурационный файл webpack:

 const path = require('path');

module.exports = {
    entry: './src/index.ts',
    mode: 'production',
    module: {
        rules: [
            {
                test: /.ts$/,
                use: 'ts-loader',
                exclude: '/node_modules/'
            }
        ]
    },
    resolve: {
        extensions: ['.ts']
    },
    output: {
        filename: 'index.js',
        path: path.resolve(__dirname, 'dist'),
        library: '',
        libraryTarget: 'commonjs2',
        libraryExport: 'default'
    }
};
  

и очень простой src / index.ts

 export function foo() {
    console.log('this is foo');
}
  

но невозможно импортировать функцию foo…
Я создал тестовый файл в другом проекте.
Я использовал «npm link» в проекте библиотеки для регистрации пакета в глобальных модулях и «npm link @kalika-libraries / mixins» в тестовом проекте, чтобы добавить его в node_modules.
Вот простой тест, который я сделал :

 import * as foo from '@kalika-libraries/mixins';

console.log('foo', foo);
  

Но он всегда регистрирует «не определено»…

Я искал часами, пробуя разные конфигурации tsconfigs или webpack, но это всегда одно и то же… Единственный случай, когда импорт работал, был при использовании tsc… Но, глядя на некоторые библиотеки (например, angular) Я знаю, что объединенные библиотеки возможны! Я просто не знаю, как это сделать (возможно, я не использую правильные инструменты …).

О, и вот package.json библиотеки, на всякий случай:

 {
    "name": "@kalika-libraries/mixins",
    "version": "1.0.0",
    "description": "Libraries to apply mixins on classes",
    "main": "dist/index.js",
    "types": "dist/index.d.ts",
    "scripts": {
        "build": "npx webpack"
    },
    "author": "Kalika",
    "license": "MIT",
    "devDependencies": {
        "@types/yeoman-generator": "^3.0.1",
        "codelyzer": "^5.0.0",
        "rxjs-tslint-rules": "^4.21.0",
        "ts-loader": "^5.3.3",
        "tslint-consistent-codestyle": "^1.15.1",
        "tslint-eslint-rules": "^5.4.0",
        "tslint-sonarts": "^1.9.0",
        "typescript": "^3.3.3",
        "vrsource-tslint-rules": "^6.0.0",
        "webpack": "^4.29.6",
        "webpack-cli": "^3.3.0"
    }
}
  

И я использовал команду «npx webpack» в папке библиотеки для ее сборки.

Так что, если у вас есть какие-либо идеи (надеюсь, вы не будете предлагать решения, которые я уже пробовал), я был бы рад протестировать это!

Спасибо.

Я столкнулся с той же проблемой. И это решило проблему для меня:

В webpack.config.js:

 output: {
  ...
  libraryTarget: 'umd',
  library: 'MyPackageName',
  ...
}
  

в tsconfig.json:

 compilerOptons: {
  ...
  "lib": ["es2015", "dom"],
  ...
}
  

Для первого разработчика библиотеки ts / js npm, использующего webpack, далеко не очевидно, что во время сборки он использует серию оптимизаций по умолчанию, которые удаляют много кода, который он определяет неиспользуемым.

При создании библиотеки необходимо явно указать wepack, чтобы он не удалял ваш экспорт: https://webpack.js.org/guides/author-libraries /