Я пытаюсь настроить веб-пакет с Typescript в своем проекте, используя официальное руководство . Вот структура моей папки и важные файлы:
├── dist
│ ├── bundle.js
│ └── index.html
├── package-lock.json
├── package.json
├── src
│ └── index.ts
├── tsconfig.json
└── webpack.config.js
src/index.ts:
// import _ from 'lodash';
const result = _.add(5, 6);
console.log(result);
webpack.config.js:
const path = require('path');
module.exports = {
entry: './src/index.ts',
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/,
},
],
},
resolve: {
extensions: [ '.tsx', '.ts', '.js' ],
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
};
tsconfig.json:
{
"compilerOptions": {
"outDir": "./dist/",
"noImplicitAny": true,
"strict": true,
"module": "es6",
"target": "es5",
"allowSyntheticDefaultImports": true
}
}
Обратите внимание, что в index.ts закомментирован импорт для lodash (я выполнил npm i lodash @types/lodash). Это должно быть ошибкой TS, но это то, что я вижу в VSCode:
Кроме того, я могу скомпилировать проект в пакетзапустив npx webpack (tsc src/index.ts тоже работает). Однако, когда я открываю файл в браузере, я вижу это в консоли:
Очевидно, это показывает, что TS предполагает, что _определяется глобально (не знаю, как), хотя пакет на самом деле не импортируется сам. Раскомментирование импорта исправляет ошибку ReferenceError, но я не понимаю, почему компилятор Typescript не понимает, что lodash не импортируется, и сообщает об ошибке компиляции.
Одна вещь, которую я заметил, это то, что когда яизменив свой файл следующим образом, я получил это предупреждение с волнистой красной линией под подчеркиванием для _.add:
// import _ from 'lodash';
import a from 'lodash';
const result = _.add(5, 6);
console.log(result);
'_' относится к глобальному UMD, но текущий файлмодуль. Попробуйте добавить импорт вместо этого. тс (2686)