如何为 babel-loader 预设设置 resolve

Question

我正在尝试使用 webpack 进行捆绑。我有一点复杂的依赖关系：一些组件需要位于某些 /home/.../ 文件夹中的其他组件。

组件（/home/.../far-away-components/base-component.js 文件）：

import {base_component} from "base-component";
exports class MyComponent extends base_component {
   ...
}

webpack.config.js:

var path = require("path");
module.exports = {
    ...
    module: {
        loaders: [
            {
                test: /\.(js)$/,
                loader: "babel",
                query: {
                    presets: ['react', 'es2015', "stage-0"]
                }
            }
        ]
    },
    resolve: {
        alias: {
            "base-component": "/home/.../far-away-components/base-component.js"
    }
};

问题是 far-away-components 文件夹不包含 node_modules，我得到一个错误：Couldn't find preset "react" relative to directory "/home/.../far-away-components".

如何为 babel-loader 个预设设置 resolve？

Answer 1

解决方案from github issue：

query: {
  presets: [
    'babel-preset-es2015',
    'babel-preset-react',
    'babel-preset-stage-0',
  ].map(require.resolve),
}

Answer 2

怎么样运行

npm init

在 /home/.../far-away-components 文件夹中，然后使用 npm 安装你需要的东西。

Answer 3

@mqklin：您需要使用“.map(require.resolve)”来解决此问题，因为您没有在加载程序中排除 /node_modules/。以下格式应该有效：

    loaders: [
  {
    test: [/\.js$/, /\.es6$/],
    exclude: /node_modules/,
    loader: 'babel-loader',
    query: {
      cacheDirectory: true,
      presets: ['react', 'es2015'],
    }
  }
]

Answer 4

@mick-feller at this github issue 的建议对我很有效，告诉 webpack 不要遵循符号链接：

module.exports = {
    resolve: {
        symlinks: false
    },

另见 webpack docs at resolve.symlinks。

如何为 babel-loader 预设设置 resolve

How to set resolve for babel-loader presets

webpack