我在项目中使用第三方库作为某个模块。我也想为库做贡献，所以我使用了npm链接，这样我的代码更改就会更容易管理。当我试图通过npm / node_modules正常包含库时，包已成功加载但当我将其移动到另一个文件夹并使用npm链接时会抛出此错误
ERROR in ../react-google-maps/lib/utils/index.js
Module not found: Error: Cannot resolve module 'babel'
这是我的package.json
{
"name": "Test",
"version": "1.0.0",
"description": "Logistics",
"author": "wnoveno",
"main": "index.js",
"scripts": {
"start": "node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js --port 9000",
"build": "webpack -p",
"test": "mocha --compilers js:babel-core/register --require ./test/test_helper.js --recursive ./test",
"test:watch": "npm run test -- --watch"
},
"license": "ISC",
"devDependencies": {
"babel-cli": "^6.5.1",
"babel-core": "^6.5.2",
"babel-loader": "^6.2.0",
"babel-preset-es2015": "^6.1.18",
"babel-preset-react": "^6.1.18",
"babel-preset-stage-0": "^6.5.0",
"babel-preset-stage-1": "^6.1.18",
"chai": "^3.5.0",
"chai-jquery": "^2.0.0",
"jquery": "^2.2.1",
"jsdom": "^8.1.0",
"mocha": "^2.4.5",
"webpack": "^1.12.9",
"webpack-dev-server": "^1.14.0"
},
"dependencies": {
"axios": "^0.11.0",
"babel-runtime": "^6.9.2",
"classnames": "^2.2.5",
"css-loader": "^0.23.1",
"extract-text-webpack-plugin": "^1.0.1",
"http-server": "^0.9.0",
"immutable": "^3.8.1",
"lodash": "^4.13.1",
"moment": "^2.13.0",
"node-sass": "^3.4.2",
"postcss-loader": "^0.9.1",
"react": "^15.0.0",
"react-big-calendar": "^0.9.12",
"react-bootstrap": "^0.29.5",
"react-cookie": "^0.4.6",
"react-dom": "^15.0.0",
"react-redux": "^4.4.5",
"react-redux-loading-bar": "^2.0.2",
"react-router": "^2.4.1",
"react-router-redux": "^4.0.5",
"react-tap-event-plugin": "^1.0.0",
"redux": "^3.0.4",
"redux-form": "^5.0.0",
"redux-localstorage": "^0.4.0",
"redux-persist": "^3.1.1",
"redux-promise": "^0.5.3",
"redux-promise-middleware": "^3.2.0",
"redux-thunk": "^2.1.0",
"sass-loader": "^3.2.0",
"style-loader": "^0.13.1"
}
}
和webpack.config
const path = require('path')
module.exports = {
entry: [
'./src/index.js'
],
output: {
path: __dirname,
publicPath: '/',
filename: 'bundle.js'
},
module: {
loaders: [{
exclude: /node_modules/,
loader: 'babel'
},
{
test: /(\.scss|\.css)$/,
loaders: ['style', 'css', 'sass']
}]
},
resolve: {
root: [path.resolve(__dirname, 'src')],
extensions: ['', '.js', '.jsx', '.scss'],
modulesDirectories: [
'node_modules',
path.resolve(__dirname, './node_modules'),
path.resolve(__dirname, './node_modules/react-google-maps/lib'),
]
},
// resolveLoader: {
// modulesDirectories: [
// './node_modules/react-google-maps/node_modules/babel-cli'
// ]
// },
devServer: {
historyApiFallback: true,
contentBase: './'
},
externals: {
'config': JSON.stringify(require('./config-dev.json'))
},
}
const path = require('path')
module.exports = {
entry: [
'./src/index.js'
],
output: {
path: __dirname,
publicPath: '/',
filename: 'bundle.js'
},
module: {
loaders: [{
exclude: /node_modules/,
loader: 'babel'
},
{
test: /(\.scss|\.css)$/,
loaders: ['style', 'css', 'sass']
}]
},
resolve: {
root: [path.resolve(__dirname, 'src')],
extensions: ['', '.js', '.jsx', '.scss'],
modulesDirectories: [
'node_modules',
path.resolve(__dirname, './node_modules'),
path.resolve(__dirname, './node_modules/react-google-maps/lib'),
]
},
// resolveLoader: {
// modulesDirectories: [
// './node_modules/react-google-maps/node_modules/babel-cli'
// ]
// },
devServer: {
historyApiFallback: true,
contentBase: './'
},
externals: {
'config': JSON.stringify(require('./config-dev.json'))
},
}
这是包的package.json
{
"name": "react-google-maps",
"version": "5.0.0",
"description": "React.js Google Maps integration component",
"main": "src/index.js",
"files": [
"lib/",
"src/",
"CHANGELOG.md"
],
"scripts": {
"clean": "rimraf lib",
"prebuild": "npm run lint && npm run clean",
"build:watch": "npm run build -- --watch",
"build": "cross-env NODE_ENV=production babel src --out-dir lib",
"lint": "cross-env NODE_ENV=test eslint .",
"pretest:cov": "npm run lint",
"pretest": "npm run lint",
"test:cov": "cross-env NODE_ENV=test babel-node ./node_modules/.bin/isparta cover --report lcov _mocha -- $npm_package_config_mocha",
"test:watch": "npm test -- --watch",
"test": "cross-env NODE_ENV=test mocha $npm_package_config_mocha",
"prerelease": "npm run build && git add -A && git commit -m 'chore(lib): compile from src using babel'",
"release": "standard-version"
},
"config": {
"mocha": "--compilers js:babel-register ./src/**/__tests__/*.spec.js --require ./src/__tests__/setup.js"
},
"repository": {
"type": "git",
"url": "https://github.com/tomchentw/react-google-maps"
},
"keywords": [
"React.js",
"React",
"react-component",
"google",
"map",
"maps",
"place",
"places",
"googlemap",
"googlemaps",
"google-map",
"google-maps",
"google map",
"google maps",
"GoogleMapsMixin",
"Map",
"Marker",
"Polyline",
"Polygon",
"Circle",
"Directions",
"InfoWindow",
"SearchBox"
],
"author": {
"name": "tomchentw",
"email": "developer@tomchentw.com",
"url": "https://github.com/tomchentw"
},
"license": "MIT",
"bugs": {
"url": "https://github.com/tomchentw/react-google-maps/issues"
},
"homepage": "https://tomchentw.github.io/react-google-maps/",
"devDependencies": {
"babel-cli": "^6.5.1",
"babel-core": "^6.5.2",
"babel-eslint": "^6.0.4",
"babel-plugin-lodash": "^3.1.4",
"babel-plugin-transform-flow-comments": "^6.5.0",
"babel-plugin-transform-runtime": "^6.9.0",
"babel-plugin-typecheck": "^3.6.1",
"babel-preset-es2015": "^6.5.0",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-0": "^6.5.0",
"babel-register": "^6.5.2",
"codeclimate-test-reporter": "^0.3.1",
"cross-env": "^1.0.7",
"eslint": "^2.2.0",
"eslint-config-airbnb": "^9.0.1",
"eslint-plugin-flowtype": "^2.4.0",
"eslint-plugin-import": "^1.8.1",
"eslint-plugin-jsx-a11y": "^1.2.2",
"eslint-plugin-react": "^5.1.1",
"expect": "^1.14.0",
"isparta": "^4.0.0",
"istanbul": "^0.4.2",
"jsdom": "^9.2.1",
"mocha": "^2.4.5",
"react": "^15.1.0",
"react-dom": "^15.1.0",
"rimraf": "^2.5.2",
"standard-version": "^2.2.1",
"tomchentw-npm-dev": "^4.0.0"
},
"dependencies": {
"babel-runtime": "^6.9.2",
"can-use-dom": "^0.1.0",
"google-maps-infobox": "^1.1.13",
"invariant": "^2.1.1",
"lodash": "^4.13.1",
"marker-clusterer-plus": "^2.1.4",
"react-prop-types-element-of-type": "^2.1.0",
"scriptjs": "^2.5.8",
"warning": "^2.1.0"
},
"peerDependencies": {
"react": "^0.14.0 || ^15.0.0",
"react-dom": "^0.14.0 || ^15.0.0"
}
}
答案 0 :(得分：0)
您的resolve配置不正确，因为webpack 1的resolve配置令人困惑......
modulesDirectories不接受绝对路径（即您使用path.resolve构建的内容），但只接受目录名称。默认modulesDirectories将做正确的事。
你需要的是fallback指向path.resolve(__dirname, 'node_modules')（只会path.resolve(__dirname)工作吗？我不知道。）
当npm link ed模块本身需要另一个模块时，当它尝试resolve依赖项时，它就在项目的文件夹之外，因此它无法访问您的{{1通过节点的正常解析（node_modules实现的）。然后，webpack的解析器将尝试查看modulesDirectories绝对路径。