Экспорт компиляции Webpack из файла ts в ничто

В моем файле index.ts всего одна строка.

export * from "./foo"

В файле foo.ts также есть только одна строка.

export const foo = ()=> 'bar'

Я использую только конфигурацию по умолчанию из "npx webpack-cli init". Редактируются только «режим» и «выход».

const TerserPlugin = require('terser-webpack-plugin');


module.exports = {
  mode: 'production',
  entry: './src/index.ts',
  output:{
    filename:'index.js'
  },
  plugins: [new webpack.ProgressPlugin()],

  module: {
    rules: [{
      test: /\.(ts|tsx)$/,
      loader: 'ts-loader',
      include: [path.resolve(__dirname, 'src')],
      exclude: [/node_modules/],
      options:{
        transpileOnly: true
      }
    }]
  },

  resolve: {
    extensions: ['.tsx', '.ts', '.js']
  },

  optimization: {
    minimizer: [new TerserPlugin()],

    splitChunks: {
      cacheGroups: {
        vendors: {
          priority: -10,
          test: /[\/]node_modules[\/]/
        }
      },

      chunks: 'async',
      minChunks: 1,
      minSize: 30000,
      name: false
    }
  },
  target:"web"
}

А вот мой tsconfig.js

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": false,
    "noImplicitAny": true,
    "module": "es6",
    "target": "es5",
    "allowJs": false,
    "sourceMap": true
  }
}

Вот мой package.json

{
  "name": "npm",
  "version": "1.0.0",
  "description": "",
  "main": "dist/index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@webpack-cli/init": "^1.0.3",
    "babel-plugin-syntax-dynamic-import": "^6.18.0",
    "terser-webpack-plugin": "^5.0.3",
    "ts-loader": "^8.0.12",
    "typescript": "^4.1.2",
    "webpack": "^5.10.0",
    "webpack-cli": "^4.2.0"
  }
}

С ними, когда я запускаю сборку

"build": "webpack"

Я получил пустой index.js в «dist/index.js». Что мне не хватает?

Когда я компилирую машинописный текст "tsc", все в порядке.

KWARN KHAM 11.12.2020 17:04

Можете ли вы также поделиться своим package.json?

tmhao2005 11.12.2020 19:13

Я отредактировал вопрос, включив в него package.json

KWARN KHAM 12.12.2020 12:03

@tmhao2005 надеюсь, вы можете помочь

KWARN KHAM 12.12.2020 15:34
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
4
434
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я думаю, что проблема здесь в том, чтобы удалить неиспользуемый экспорт webpack. Имейте в виду, что webpack может сделать это, если входной код, переданный ему, не должен быть esm стилем, таким же, как вы сделали, настроив module: "es6".

В случае экспорта в виде библиотеки вам, возможно, придется сообщить веб-пакету о сборке в виде библиотеки, указав цель или даже добавив имя:

webpack.config.js

{
  output: {
    library: "yourLibName",
    libraryTarget: "umd",
    filename: "index.js"
  },
}

Мой код будет использоваться в среде браузера. Я думаю, что commonjs предназначен для среды узла. Будут ли проблемы, если я перейду на "commonjs"?

KWARN KHAM 12.12.2020 17:26

Неа. commonjs будет передан webpack, затем он будет фактически преобразован в код, который поддерживает работу в браузере.

tmhao2005 12.12.2020 17:34

Спасибо. С commonjs файл index.js больше не пустой. Но я не могу импортировать из него в среде браузера.

KWARN KHAM 12.12.2020 17:37

Можете ли вы сказать мне, чего именно вы хотите достичь?

tmhao2005 12.12.2020 17:41

Я пытаюсь создать пакет npm. Моя идея состоит в том, чтобы экспортировать все в основной файл (index.js). Прямо сейчас я получаю только пустой объект при импорте из основного файла.

KWARN KHAM 12.12.2020 17:45

Ах я вижу. Я дал вам еще одну подсказку

tmhao2005 12.12.2020 18:00

Спасибо чувак. это работает, как я намеревался сейчас. Можете ли вы объяснить, пожалуйста, или дайте мне ссылку, где я могу прочитать, почему это работает?

KWARN KHAM 12.12.2020 18:08

Вы можете перейти на официальный сайт webpack, чтобы прочитать вариант вывода

tmhao2005 12.12.2020 18:11

Другие вопросы по теме