Я обнаружил интересный вариант использования, когда мы импортируем модуль (просто назовите его foo ), который поддерживает как узлы, так и браузер. Но с таким же импортом foo , WebPack в конечном итоге будет другим результатом в браузере. Давайте посмотрим на следующий пример:
Во -первых, предположим, что у меня есть пакет foo Как ниже:
- dist -- index.js (cjs) -- index.module.js (esm - mostly for browser)
Содержание foo будет выглядеть в обоих модулях:
// dist/index.js // the content can be `cjs` or `umd`, for example: module.exports = 1; // dist/index.module.js export default 1;
Далее напишите простой фрагмент для импорта foo в CJS стиль:
const foo = require('foo');
console.log(foo);
Затем запустите на узле:
const foo = require('foo');
// since above line of code ref to dist/index.js so will work as expected
console.log(foo); // 1
Наконец, запустите браузер через WebPack После преобразования:
// webpack auto select `esm` module by default
var foo = __webpack_require__("./node_modules/foo/index.module.js");
// __webpack_require__ will turn the foo object to be like:
// { default: 1 }
// As a result of that, this code won't work as expected
console.log(foo); // undefined
Подводя итог, мы должны быть осторожны с пакетом ( foo ), который поддерживает запуск на узле/браузере, чтобы избежать неожиданного результата, как указано выше. Как я знаю, большинство пакетов в настоящее время реализуются таким образом. Если вы пишете код в TypeScript или Esnext в стиле, вы можете включить конфигурацию {esmoduleInterop: true} Чтобы импортировать помощника, чтобы разобраться в проблеме в случае TypeScript.
Спасибо за чтение!
Оригинал: “https://dev.to/tmhao2005/webpack-compiles-nodemodules-106m”