Блог

Я следовал руководству по машинописи: https://webpack.js.org/guides/typescript / Когда я запускаю webpack в режиме «production», он почти ничего не выдает.

Вот исходный код моего файла src / index.ts:

 export function foo() {
  return 'foo'
}
export const bar = 'bar'

 

Затем я запускаю команду:

 webpack
 

Я получил ‘bundle.js ‘ файл, скомпилированный в папку ‘dist’, код:

 (()=>{"use strict"})();
 

Но если перейти в папку ‘src’ и скомпилировать с помощью команды ‘tsc’, она сгенерирует файл javascript со следующим кодом:

 "use strict";
exports.__esModule = true;
exports.bar = exports.foo = void 0;
function foo() {
    return 'foo';
}
exports.foo = foo;
exports.bar = 'bar';
 

Я думаю, что оба ‘dist/bundle.js » и тот самый «src/index.js «файл должен быть таким же, по крайней мере, функциональность. Но теперь ‘dist/bundle.js «файл вообще не работает.

И ниже приведен код других связанных файлов:

 // package.json
{
  "name": "webpack-ts",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" amp;amp; exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "ts-loader": "^9.2.6",
    "typescript": "^4.5.2",
    "webpack": "^5.65.0",
    "webpack-cli": "^4.9.1"
  }
}
 

 // webpack.config.js
const path = require('path');

module.exports = {
  mode: 'production',
  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,
    "module": "es6",
    "target": "es5",
    "jsx": "react",
    "allowJs": true,
    "moduleResolution": "node"
  }
}
 

Кто-нибудь может мне помочь? Спасибо.

Использование webpack в production режиме приведет к удалению мертвого кода из-за встряхивания дерева.

foo функция и bar переменные являются неиспользуемым экспортом, который следует удалить. Это то, что известно как «мертвый код».

Если вы создаете другой файл, который использует bar переменную.

 import { bar } from "./index";

console.log(bar);
 

bundle.js Вывод будет:

 (()=>{"use strict";console.log("bar")})();
 

TypeScript просто стирает типы и компилирует код для целевой языковой версии JavaScript, например es5 , у него нет концепции «встряхивания дерева».