Не удается получить доступ к определенному экспорту из пакета webpack? - PullRequest
Новая
       41

Не удается получить доступ к определенному экспорту из пакета webpack?

0 голосов
/ 02 августа 2020

Я пытаюсь составить пакет webpack из существующих файлов js и использовать экспорт из него как в других файлах JS, так и иногда в теге сценария html. Позже добавьте babel, чтобы перенести все это в es5, поэтому закомментировал раздел с помощью babel и ts, что, кстати, отлично работает. На данный момент у меня возникла проблема с экспортом с использованием прямого веб-пакета.

Конфигурация веб-пакета выглядит следующим образом: 

var path = require('path');
const { updateCommaList } = require('typescript');

module.exports = {
    entry: {
        'core' : [
        './src/utils.js',
        './src/zdlg.js'
        ]
    },
    devtool: 'source-map',
    stats: 'verbose',
    resolve: {
      modules: ['node_modules']
    },
    resolveLoader: {
      extensions: ['.ts', '.tsx'],
      mainFields: ['loader', 'main']
    },
    output: {
      filename: '[name].js',
      library: "LIB",
      libraryTarget: 'var',
      path: path.resolve(__dirname, "dist")
    },
    module: {
     }
  };

Я могу объединять файлы, ошибок нет. Я экспортирую функции, используя оператор экспорта, например: 

export function v ...

И в файле html у меня есть 

<script src="./core.js"></script>
<script type="module" src="./io.js"></script>

После того, как я возился в течение последних нескольких дней, я понял пару вещи.

  1. Если у меня есть единственный файл в разделе ввода для основного объекта, экспорт работает, поскольку переменная LIB имеет свойство для каждой экспортируемой функции, и я могу вызвать LIB.v () нормально.
  2. импорт все равно не работает, то есть io. js import: 
import {v} from './core.js';

Выдает ошибку при загрузке страницы: Uncaught SyntaxError: import not found: v для строки выше.

Добавление второго файла к записи заставляет webpack переопределять экспорт из 1-го файла. Причина, по которой я изначально не видел экспорта, заключалась в том, что zdlg. js ничего не экспортировал, а LIB не имел экспорта. Если zdlg. js экспортирует какие-либо функции, они единственные, что отображаются в LIB.

Итак, в конце концов, я могу экспортировать функции из одного файла, но я думал, что все цель веб-пакета состояла в том, чтобы позволить составлять модули из нескольких файлов.

Я не уверен, что мне не хватает или где я ошибаюсь, должно быть очень c материал ...

Если это важно, вот список разработчиков: 

  "devDependencies": {
    "@babel/core": "^7.8.7",
    "@babel/preset-env": "^7.8.7",
    "babel-loader": "^8.0.6",
    "install": "^0.13.0",
    "npm": "^6.14.7",
    "ts-loader": "^6.2.1",
    "typescript": "^3.8.3",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.12",
    "webpack-dev-middleware": "^3.7.2",
    "webpack-dev-server": "^3.11.0",
    "webpack-merge": "^5.0.9"
  }

1 Ответ

0 голосов
/ 11 августа 2020

Это сработало, хотя я не уверен, что это лучший способ.

По сути, вместо добавления нескольких записей в раздел ввода экспорта я создал файл index. js, который повторно экспортировал все экспорт из необходимых мне файлов: 

require('./src/ut');
require('./src/zd');

export * from './src/ut';
export * from './src/zd'

Запись теперь просто индекс. js

entry: {
        'core' : 'index.js'
    },

Работает по назначению, но я не уверен, почему бы Webpack не автоматизировать это , а зачем мне самому все экспортировать ...

...