Как использовать awesome-typescript-загрузчик с babel для переноса определенного узла? - PullRequest
Новая
       10

Как использовать awesome-typescript-загрузчик с babel для переноса определенного узла?

0 голосов
/ 17 января 2019

В течение некоторого времени я пытался перенести модуль узла, который использует оператор распространения объекта.Это проблема для меня, потому что мое приложение должно поддерживать Edge и на данный момент оно не поддерживает оператор распространения объектов.

Я настроил загрузчик awesome-typcript для использования babelустановив для свойства useBabel значение true, чтобы мне не нужно было устанавливать babel-loader самостоятельно.Я также добавил пресет babel-preset-edge , который добавляет множество полезных пресетов и плагинов.Важным, который он добавляет по умолчанию, является @ babel-plugin-offer-object-rest-spread , который необходим для переноса этого модуля узла.

Даже с этой настройкой, удивительномашинопись, кажется, всегда игнорирует модуль, который я хочу передать.Это стало для меня очевидным, когда я сделал это 

include: function(absPath) {
    // I want to in include my source code or the module I want to transpile.
    const includePath = /@furystack/.test(absPath) || /src/.test(absPath)
    // this will always output true because all the paths have src in their path. 
    // Not a single one from node modules.
    console.log(includePath)
    return includePath
}

Он должен был вывести некоторые значения true и false (true, поскольку это либо мой исходный код, либо furystack, и false для всего остального), но это не былодело.

Вот так выглядят мои загрузчики 

module: {
  rules: removeEmpty([
    {
      test: /\.(ts|tsx)$/,
      use: [
        {
          options: {
            useTranspileModule: true,
            forceIsolatedModules: true,
            useCache: true,
            useBabel: true,
            reportFiles: ['src/**/*.{ts,tsx}'],
            babelCore: '@babel/core'
          },
          loader: 'awesome-typescript-loader'
        }
      ],
      include: function(absPath) {
        return /@furystack/.test(absPath) || /src/.test(absPath)
      }
    },
}

Вот так выглядит мой .babelrc 

{
  "presets": [
    [
      "edge",
      {
        "transpile": "modern",
        "modules": "false"
      }
    ]
  ]
}

А вот так выглядит мой .tsconfig.json 

{
  "compilerOptions": {
    "outDir": "lib",
    "module": "esnext",
    "target": "esnext",
    "lib": ["es6", "dom"],
    "sourceMap": true,
    "jsx": "preserve",
    "baseUrl": "./src",
    "rootDir": "./src",
    "moduleResolution": "node",
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "preserveConstEnums": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "forceConsistentCasingInFileNames": true,
    "noImplicitReturns": false,
    "alwaysStrict": false,
    "allowSyntheticDefaultImports": true,
    "noFallthroughCasesInSwitch": true,
    "skipLibCheck": true,
    "noEmit": true,
    "types": ["jest", "node"]
  },
  "include": ["./src/**/*"],
  "exclude": ["node_modules"]
}

Что не так с моей конфигурацией?

1 Ответ

0 голосов
/ 17 января 2019

Благодаря этому ответу Ашиша ( Можно ли перенести локальные модули из node_module? ), я смог найти решение.

Так что проблема заключалась в том, чтомодуль, который я использовал, импортировал файл js, который не был полностью перенесен (оператор распространения объекта) вместо файла ts или tsx.Это означало, что мне нужно было переустановить загрузчик babel, чтобы я мог сделать отдельный проход с загрузчиком babel для файлов js.Следующая проблема, с которой я столкнулся, заключалась в том, что модуль был скомпилирован с помощью commonjs, поэтому импорт также должен был переноситься.

Теперь это мой загрузчик. 

{
   {
      test: /\.js$/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: [
            [
              'edge',
              {
                transpile: 'es2015',
                modules: 'commonjs'
              }
            ]
          ]
        }
      },
      include: [path.resolve(__dirname, 'node_modules/@furystack')]
    },
    {
      test: /\.tsx?$/,
      use: [
        {
          options: {
            useTranspileModule: true,
            forceIsolatedModules: true,
            useCache: true,
            useBabel: true,
            babelOptions: {
              babelrc: false /* Important line */,
              presets: [
                [
                  'edge',
                  {
                    transpile: 'modern',
                    modules: 'false'
                  }
                ]
              ]
            },
            reportFiles: ['src/**/*.{ts,tsx}'],
            babelCore: '@babel/core'
          },
          loader: 'awesome-typescript-loader'
        }
      ],
      include: [path.resolve(__dirname, 'src')]
    },
}
...