web-dev-qa-db-ja.com

Babelは「node_modules」からインポートされたモジュールをトランスパイルしません

node_modulesからインポートされたモジュールのトランスコンパイルで問題が発生しました。何らかの理由でBabelはnode_modulesからインポートされたモジュールをトランスパイルしませんが、srcからインポートされたモジュールをトランスパイルします。

リポジトリの例を次に示します。 https://github.com/NikitaKA/babeltest

main.js

// result code contains const and let, but it shouldn't. :(

index.js

import qs from 'query-string; // not transpiled
import lib from './lib' // transpiled

const query = qs.parse(window.location.search);

webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  }
};

。babelrc

{
  "presets": [
    ["@babel/preset-env", {
      "modules": false,
      "targets": {
        "chrome": 39
      }
    }],
    ["@babel/preset-stage-1", {
      "modules": false,
      "decoratorsLegacy": true,
      "pipelineProposal": "minimal"
    }]
  ],
  "plugins": [
    "transform-es2015-constants",
    "@babel/plugin-transform-block-scoping",
    "@babel/plugin-transform-runtime"
  ]
}
javascriptwebpackbabel
7
NikitaK

私のコメントを拡大するには：

あなたは本当にすべてのnode_modules –時間がかかりますが、ほとんどのコードは既にES5になっているはずです（実際にはES6モジュールである場合を除き、ES6エントリポイントは"module" の中に package.jsonマニフェスト）。

[email protected]はではなく、 そのREADME でそう言っています：

このモジュールは、Node.js 6以降およびChrome、Firefox、Safariの最新バージョンを対象としています。古いブラウザのサポートが必要な場合は、バージョン5を使用してください：npm install query-string@5。

5
AKX

この場合の解決策は、モジュールを再度トランスパイルすることです。これは、webpack構成のexcludeプロパティを変更することで実行できます。

{
  test: /\.js$/,
  exclude: /node_modules\/(?!(es6-module|another-es6-module)\/).*/,
},

モジュールes6-moduleおよびanother-es6-moduleはwebpackで無視されなくなり、ソースコードの残りの部分とともにトランスコンパイルされます。

webpackプロジェクトのGitHubの問題 を参照してください。

[email protected]、[email protected]、および[email protected]でテスト済み

1
Rafal Enden