Невозможно скомпилировать TypeScript пакета с символической ссылкой с помощью babel-loader

У меня есть 2 пакета: «общий» и «Интернет». Оба они используют TypeScript. Я использую webpack с babel-loader в сети. Когда я использую символическую ссылку «общий», он не может скомпилировать свой TypeScript.

В этой проблеме предлагается использовать symlinks: false в webpack.config.js, но не работает: https://github.com/webpack/webpack/issues/1643

Структура папки:

root
│
└───shared
│   │   package.json
│   │   UseMe.ts
│   
└───web
    │   .babelrc
    │   index.ts
    │   package.json
    │   tsconfig.json
    │   webpack.config.js

общий \ package.json

{
  "name": "shared",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "typescript": "^3.6.4"
  }
}

общий \ UseMe.ts

class UseMe {
    prop: string
}

export default UseMe;

web \ .babelrc

{
    "presets": [
        "@babel/preset-typescript"
    ]
}

web \ index.ts

import UseMe from 'shared/UseMe';
const x = new UseMe();

web \ package.json

{
  "name": "web",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "author": "",
  "license": "ISC",
  "scripts": {
    "build": "webpack"
  },
  "dependencies": {
    "@babel/core": "^7.2.2",
    "@babel/preset-typescript": "^7.1.0",
    "babel-loader": "^8.0.5",
    "webpack": "^4.29.3",
    "webpack-cli": "^3.2.3"
  },
  "devDependencies": {
    "typescript": "^3.3.3"
  }
}

веб \ tsconfig.json

{
  "compilerOptions": {
    "outDir": "./dist/",
    "noImplicitAny": true,
    "module": "commonjs",
    "esModuleInterop": true,
    "target": "es6",
  }
}

web \ webpack.config.js

const path = require('path');

module.exports = {
    entry: './index.ts',
    output: {
        path: path.join(__dirname, './dist'),
        filename: 'bundle.js'
    },
    resolve: {
        extensions: ['.ts', '.tsx', '.js'],
        symlinks: false
    },
    module: {
        rules: [
            {
                test: /\.(ts|js|tsx)?$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader'
                },
            }
        ]
    }
};

Команды:

cd shared
npm install
npm link
cd ..\web
npm install
npm link shared
npm run build

Ошибка:

ERROR in ./node_modules/shared/UseMe.ts 2:8
Module parse failed: Unexpected token (2:8)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| class UseMe {
>     prop: string
| }
|

webpack typescript javascript babeljs babel-loader
person Nine    schedule 26.10.2019    source источник
comment
Помогает ли установка и добавление @babel/plugin-proposal-class-properties в качестве подключаемого модуля к .babelrc?   -  person ford04    schedule 26.10.2019
comment
@ ford04 Хорошая мысль, я попробовал ваше предложение, но это не помогло. Даже если я удалю свойство и просто изменю class на interface, он все равно не сможет скомпилировать .ts файл. Так что не похоже, что это из-за собственности.   -  person Nine    schedule 26.10.2019
comment
Вы также захотите взглянуть на конфигурации моно репозитория babel babel.config.js, поскольку преобразования babel с .babelrc останавливаются в корне пакета, обозначенном package.json. И когда у вас есть symlinks: false, я бы ожидал, что babel будет игнорировать преобразования ваших связанных пакетов, поскольку вы установили exclude: /node_modules/ для babel-loader.   -  person ford04    schedule 27.10.2019

Ответы (1)


arrow_upward
5
arrow_downward

Решение

  1. Удалите root\web\.babelrc и замените его на root\web\babel.config.js:
module.exports = function (api) {
    api.cache(true);

    const presets = ["@babel/preset-typescript"];
    const plugins = [];

    return {
        presets,
        plugins
    };
}
  1. Удалить строку exclude: /node_modules/ из root\web\webpack.config.js

Больше информации

Первая проблема заключалась в том, что при использовании Babel .babelrc ограничивает область действия той же папкой, что и package.json. Так что, даже если я вручную переместил «общую» папку в root\web, это все равно не сработает, если я не удалю shared\package.json.

Вторая проблема заключалась в том, что когда на пакет ставится символическая ссылка, он попадает в ваш «node_module», поэтому exclude: /node_modules/ исключит его из транспиляции.

См. Эту страницу для получения дополнительной информации: https://babeljs.io/docs/en/config-files < / а>

Спасибо @ ford04 за ответ, я просто написал шаги.

person Nine    schedule 27.10.2019