无法找到相对于新项目目录的预设“es2015”

Question

我尝试了这里列出的所有选项和其他网站，但似乎都没有。

我能够为我的第一个测试应用程序（MyApp）正确安装webpack reactjs和其他组件。

对于我的下一个应用程序项目，我想利用第一个应用程序中的所有npm-modules ，这样我就不必再次下载所有模块并将它们集中存储。

但是，我一直错过关于错过“es2015”的错误。 我的第一个应用程序项目下的webpack不会报告此问题。 奇怪的是，即使我将预设从es2015更改为XXes2015，我仍然会得到相同的消息。

我的webpack.config.js：

var path = require('path');

var isDev=true;
const cssModulesNames = `${isDev ? '[path][name]__[local]__' : ''}[hash:base64:5]`;


var config = {

    entry:  path.resolve(__dirname, 'js\\main.js'),
    output: {
        path: path.resolve(__dirname, '.'),
        filename: '.\\bundle.js'
    },

    resolveLoader: {

         modulesDirectories:  [ '../../../../Documents/API/react/examples/MyApp/node_modules'   ]
    },
    module: {
        loaders: [{
            test: /\.jsx?$/,
            loader: 'babel',
            query:
            {
                presets:   [ 'es2015', 'react',"stage-0"]

            }
        }]
       }

       };

    module.exports = config;

我的package.jason：

  {
     "name": "App1",
     "version": "1.13.1",
     "description": "",
     "main": ".",
     "dependencies": {
    "babel-core": "latest",
       "babel-loader": "latest",
       "babel-preset-es2015": "latest",
       "babel-preset-react": "latest",
       "babel-preset-stage-0": "latest"
     },
     "devDependencies": {},
     "scripts": {
       "test": "jest --verbose"
     },
     "jest": {
           "scriptPreprocessor": "<rootDir>/node_modules/babel-jest",
           "unmockedModulePathPatterns": [
               "<rootDir>/node_modules/react",
               "<rootDir>/node_modules/react-dom",
               "<rootDir>/node_modules/react-addons-test-utils",
               "<rootDir>/node_modules/fbjs"
           ]
       },
     "author": "XX",
     "license": "ISC"
   }

我的.bablrc：

{     "presets": ["es2015", "stage-0", "react"]   }

如果我在webpack.config.js或.babelrc中将条目es2015更改为esXX2015，则会出现相同的错误。 我希望它能找到不同的预设。

希望有人可以更多地关注这一点并帮助我！

谢谢。

Answer 1

确保你的文件名是：.babelrc而不是.bablrc

您可以尝试在webpack.config上添加babel-loader

改变loader: 'babel'到loader: 'babel-loader'

Answer 2

看起来你期望resolveLoader.modulesDirectories配置参数告诉babel在哪里可以找到预设。 webpack使用此参数来查找加载器（例如babel-loader），但不能查找babel。

Answer 3

你的问题中有一个拼写错误。 它应该是.babelrc而不是.bablrc

`.babelrc'的内容如下所示。 订单很重要 。

stage-0 → ES2015 → JSX → ES5

{
  "presets": [
    "stage-0",
    "es2015",
    "react"
  ]
}

我建议您在.babelrc文件或webpack.config文件中预设，以保持单一的事实来源。 因此，删除webpack.config中的查询条目，并添加一个排除条目，以忽略node-modeuls文件夹中的js / jsx文件（更新如下...）

loaders: [{
    test: /\.jsx?$/,
    exclude: /node-modules/,  
    loader: 'babel'
}]

Answer 4

我终于设法通过创建节点模块符号链接到以前的项目node_module目录来解决这个问题。 虽然这实现了我想要的，我有点不高兴我尝试的webpack.config.js中的各种设置无法实现这一点。 希望有人提供正确的设置，以便webpack行为更加清晰（至少对我来说）。 希望这有助于其他人试图解决类似的问题......