Question

我正在使用Webpack和React构建应用程序。

我的package.json是：

{
  "name": "v1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel-core": "^6.17.0",
    "babel-loader": "^6.2.5",
    "babel-preset-es2015": "^6.16.0",
    "babel-preset-react": "^6.16.0",
    "react": "^15.3.2",
    "react-dom": "^15.3.2",
    "webpack": "^1.13.2"
  }
}

webpack.config.js：

var webpack = require('webpack');
var path = require('path');

var BUILD_DIR = path.resolve(__dirname, '');
var APP_DIR = path.resolve(__dirname, 'core');

var config = {
entry: APP_DIR + '/main.jsx',
output: {
    path: BUILD_DIR,
    filename: 'main.js'
},
module : {
    loaders : [
        {
            test: /.jsx?$/,
            loader: 'babel-loader',
            exclude: /node_modules/,
            query: {
                presets: ['es2015']
            }
        }
    ]
}
};

module.exports = config;

.babelrc：

{"presets" : ["es2015", "react"]}

这些文件位于嵌套的文件夹中，如：

root
| components
| | react
| | ember
| pages
| | | home
| | | about

我谈到的文件都在家里。基本上home和about是2个不同的npm项目，他们有自己的package.json以及webpack.config.js等等。但他们需要在文件Searchbox.jsx中访问名为SearchBox的反应组件，文件夹为root / components / react。

当我尝试从家中访问它时，显示错误说：

模块构建失败：错误：无法找到相对于的预设“es2015” 目录root / components / react

那么我该如何解决这个问题，或者你可以建议我用来制作项目文件夹之外的可重用组件的其他方法

Answer 1

我解决了这个问题。我所做的是通过npm install在react文件夹中安装节点模块，并将.babelrc文件放在那里。它试图从react目录加载node_modules，而不是SearchBox.jsx的主目录。

因此，如果其他人遇到此问题，解决方法的方法是将外部文件的所有节点依赖项安装在文件自己的目录中，或者安装在文件的某个父目录中。多数民众赞成在哪里取得它。

使用Webpack React在项目文件夹外部移动可重用组件

1 个答案: