Отключить игнорирование каталога "node_modules" в Babel - PullRequest
Новая
       101

Отключить игнорирование каталога "node_modules" в Babel

0 голосов
/ 17 октября 2018

Я использую webpack4 + babel7.В моем скрипте JS мне нужно импортировать модуль NPM.Этот модуль использует классы и модули ES6.И после сборки пакета этот класс не переходил на стандартные функции.Как сделать так, чтобы модуль NPM, который мне нужен, был полностью перенесен?

package.json 

{
  "scripts": {
    "dev": "webpack --config webpack.config.js --mode=development",
    "prod": "webpack --config webpack.config.js --mode=production"
  },
  "dependencies": {
    "@betakiller/wamp-wrapper": "^0.1.0",
    "babel-polyfill": "^6.26.0",
    "chalk": "^2.4.1",
    "whatwg-fetch": "^3.0.0"
  },
  "devDependencies": {
    "@babel/cli": "^7.1.2",
    "@babel/core": "^7.1.2",
    "@babel/preset-env": "^7.1.0",
    "babel-loader": "^8.0.4",
    "webpack": "^4.20.2",
    "webpack-cli": "^3.1.2"
  }
}

webpack.config.js 

const path     = require('path');
const paths    = {
  'src':  __dirname,
  'dist': path.resolve(__dirname, 'dist')
};
module.exports = {
  entry:  {
    app: paths.src + '/app.js'
  },
  output: {
    filename: '[name].js',
    path:     paths.dist
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use:  'babel-loader'
      }
    ]
  }
};

.babelrc 

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "usage",
        "forceAllTransforms":true
      }
    ]
  ]
}

app.js 

console.log('app.js');

import BetakillerWampFacade from '@betakiller/wamp-wrapper';
import ImportedClass from './ImportedClass';

const WampFacade = new BetakillerWampFacade();
console.log('WampFacade', WampFacade);

const Imported = new ImportedClass();
console.log('Imported', Imported);

ImportedClass.js 

'use strict';

export default class ImportedClass {
  action(){
    console.log('ImportedClass');
  }
}

Результат модуля NPM

Результат теста импортированного класса

Неудачный тест в webpack.config.js 

module: {
  rules: [
    {
      test:    /\.js$/,
      use:  'babel-loader',
      exclude: /node_modules\/(?!@betakiller\/wamp-wrappe).*/
    }
  ]
}

Мое решение

  • переместить конфигурацию babel в конфигурацию webpack
  • удалить .babelrc

новый webpack.config.js 

const path     = require('path');
const paths    = {
  'src':  __dirname,
  'dist': path.resolve(__dirname, 'dist')
};
module.exports = {
  entry:  {
    app: paths.src + '/app.js'
  },
  output: {
    filename: '[name].js',
    path:     paths.dist
  },
  module: {
    rules: [
      {
        test:    /\.js$/,
        loader:  'babel-loader',
        options: {
          ignore:  [],
          presets: [
            [
              "@babel/preset-env",
              {
                forceAllTransforms: true
              }
            ]
          ]
        },
      }
    ]
  }
};

Спасибо за вашу помощь.

1 Ответ

0 голосов
/ 17 октября 2018

Попробуйте 

{
    test: /\.js$/,
    use:  'babel-loader'
    exclude: /node_modules\/(?!(specific_package_name1|specific_package_name2)).*/
}

Если вы замените specific_package_name1 и т. Д. С именами пакетов, которые вы НЕ хотите исключать из node_modules при переходе babel.См. это регулярное выражение , чтобы увидеть, как оно совпадает с именами пакетов.

...