节点模块包如何导入依赖?
How do node modules packages import dependencies?
目前在从 v0 到 v3 的迁移 Material-UI 过程中,我面临着从错误位置导入依赖项的多个文件问题。
我们以@babel/runtime
依赖为例
以下是我的 package.json 和 yarn.lock 文件的摘录:
"dependencies": {
"@material-ui/core": "3.0.0",
"@material-ui/icons": "3.0.0",
"react-swipeable-views": "0.12.16",
"react-swipeable-views-utils": "0.12.16",
},
"devDependencies": {
"babel-cli": "6.26.0",
"babel-core": "6.26.3",
"babel-loader": "7.1.5",
"babel-runtime": "6.26.0",
"babel-regenerator-runtime": "6.5.0",
},
"@material-ui/core@3.0.0":
version "3.0.0"
dependencies:
"@babel/runtime" "7.0.0-rc.1"
"@material-ui/icons@3.0.0":
version "3.0.0"
dependencies:
"@babel/runtime" "7.0.0-rc.1"
react-event-listener@^0.6.0, react-event-listener@^0.6.2:
version "0.6.3"
dependencies:
"@babel/runtime" "7.0.0-rc.1"
react-swipeable-views-core@^0.12.16:
version "0.12.16"
dependencies:
"@babel/runtime" "7.0.0-beta.42"
recompose@^0.28.2:
version "0.28.2"
dependencies:
"@babel/runtime" "7.0.0-beta.56"
@babel/runtime@7.0.0-beta.42":
version "7.0.0-beta.42"
dependencies:
core-js "^2.5.3"
regenerator-runtime "^0.11.1"
"@babel/runtime@7.0.0-beta.56":
version "7.0.0-beta.56"
dependencies:
regenerator-runtime "^0.12.0"
"@babel/runtime@7.0.0-rc.1":
version "7.0.0-rc.1"
dependencies:
regenerator-runtime "^0.12.0"
还分享了我的 webpack 配置的一部分,因为我有预感它可能是这里的罪魁祸首:
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader",
query: {
presets: [["es2015", {loose: true, modules: false}], "react", "stage-0"],
plugins: ["transform-decorators-legacy"],
cacheDirectory: true,
},
},
],
entry: [
"babel-regenerator-runtime",
path.resolve(__dirname, sourcePath, `${jsFilename}.js`),
],
还有我的 babelrc:
{
"presets": [
"es2015",
"react",
"stage-0",
"flow"
],
"plugins": [
"transform-decorators-legacy",
["transform-runtime", {
"polyfill": false,
"regenerator": true
}],
["babel-plugin-root-import", {
"rootPathSuffix": "src"
}]
]
}
我的所有 webpack 错误都涉及 @babel/runtime/helpers
目录中丢失的 getPrototypeOf
文件:
ERROR in ./node_modules/@material-ui/core/styles/withTheme.js
Module not found: Error: Can't resolve '@babel/runtime/helpers/getPrototypeOf' in '/project/node_modules/@material-ui/core/styles'
@ ./node_modules/@material-ui/core/styles/withTheme.js 20:46-94
@ ./node_modules/@material-ui/core/styles/index.js
@ ./src/components/Root.js
@ ./src/app.js
@ multi babel-regenerator-runtime ./src/app.js
ERROR in ./node_modules/react-event-listener/dist/react-event-listener.cjs.js
Module not found: Error: Can't resolve '@babel/runtime/helpers/getPrototypeOf' in '/project/node_modules/react-event-listener/dist'
@ ./node_modules/react-event-listener/dist/react-event-listener.cjs.js 10:38-86
@ ./node_modules/@material-ui/core/Popover/Popover.js
@ ./node_modules/@material-ui/core/Popover/index.js
@ ./src/components/Header/AnonymousMenu.js
@ ./src/components/Header/index.js
@ ./src/components/ListeningRoute.js
@ ./src/components/Root.js
@ ./src/app.js
@ multi babel-regenerator-runtime ./src/app.js
如果我在 node_modules 中搜索文件,除根目录外的所有目录都包含文件:
$ for dir in $(find node_modules -name 'runtime'); do ls $dir/helpers/getPrototypeOf.js; done
node_modules/recompose/node_modules/@babel/runtime/helpers/getPrototypeOf.js
node_modules/@material-ui/icons/node_modules/@babel/runtime/helpers/getPrototypeOf.js
node_modules/@material-ui/core/node_modules/@babel/runtime/helpers/getPrototypeOf.js
node_modules/react-event-listener/node_modules/@babel/runtime/helpers/getPrototypeOf.js
ls: cannot access 'node_modules/@babel/runtime/helpers/getPrototypeOf.js': No such file or directory
node 模块应该递归搜索依赖项,这样我们就可以在不破坏项目的情况下同时使用一个包的多个版本,但在这种情况下,它们实际上是在根 node_modules/
目录中搜索它们。
其他混淆来自于我们在项目中仍然使用 babel v6,但 @babel
安装在 project/node_modules
。
有人可以解释为什么会发生这种行为,如果这是一个纯纱线问题,以及如何解决这个问题?或者它可能与 webpack 有关?
我想在一段时间内使用 Material-ui v0 和 v3 的并发版本,但目前的解决方案是向 v3 的硬迁移(以及将 babel 从 v6 迁移到v7).这确实阻碍了我们的迁移。
注意:cp node_modules/@material-ui/core/node_modules/@babel/runtime/helpers/getPrototypeOf.js node_modules/@babel/runtime/helpers
删除所有 webpack 错误...
在 webpack 中有一个名为 resolve 的选项。您必须设置解析选项,以便@material-ui 将使用他们自己的node_modules
。当前@material-ui 使用您通过 npm 或 yarn 安装的最上面的 node_modules
导入依赖项。
在你的 webpack 配置中包含
module.exports = {
...
resolve : {
modules : ['node_modules']
},
...
}
通过这样做,webpack 将在相对目录中查找 node_modules
。
目前在从 v0 到 v3 的迁移 Material-UI 过程中,我面临着从错误位置导入依赖项的多个文件问题。
我们以@babel/runtime
依赖为例
以下是我的 package.json 和 yarn.lock 文件的摘录:
"dependencies": {
"@material-ui/core": "3.0.0",
"@material-ui/icons": "3.0.0",
"react-swipeable-views": "0.12.16",
"react-swipeable-views-utils": "0.12.16",
},
"devDependencies": {
"babel-cli": "6.26.0",
"babel-core": "6.26.3",
"babel-loader": "7.1.5",
"babel-runtime": "6.26.0",
"babel-regenerator-runtime": "6.5.0",
},
"@material-ui/core@3.0.0":
version "3.0.0"
dependencies:
"@babel/runtime" "7.0.0-rc.1"
"@material-ui/icons@3.0.0":
version "3.0.0"
dependencies:
"@babel/runtime" "7.0.0-rc.1"
react-event-listener@^0.6.0, react-event-listener@^0.6.2:
version "0.6.3"
dependencies:
"@babel/runtime" "7.0.0-rc.1"
react-swipeable-views-core@^0.12.16:
version "0.12.16"
dependencies:
"@babel/runtime" "7.0.0-beta.42"
recompose@^0.28.2:
version "0.28.2"
dependencies:
"@babel/runtime" "7.0.0-beta.56"
@babel/runtime@7.0.0-beta.42":
version "7.0.0-beta.42"
dependencies:
core-js "^2.5.3"
regenerator-runtime "^0.11.1"
"@babel/runtime@7.0.0-beta.56":
version "7.0.0-beta.56"
dependencies:
regenerator-runtime "^0.12.0"
"@babel/runtime@7.0.0-rc.1":
version "7.0.0-rc.1"
dependencies:
regenerator-runtime "^0.12.0"
还分享了我的 webpack 配置的一部分,因为我有预感它可能是这里的罪魁祸首:
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader",
query: {
presets: [["es2015", {loose: true, modules: false}], "react", "stage-0"],
plugins: ["transform-decorators-legacy"],
cacheDirectory: true,
},
},
],
entry: [
"babel-regenerator-runtime",
path.resolve(__dirname, sourcePath, `${jsFilename}.js`),
],
还有我的 babelrc:
{
"presets": [
"es2015",
"react",
"stage-0",
"flow"
],
"plugins": [
"transform-decorators-legacy",
["transform-runtime", {
"polyfill": false,
"regenerator": true
}],
["babel-plugin-root-import", {
"rootPathSuffix": "src"
}]
]
}
我的所有 webpack 错误都涉及 @babel/runtime/helpers
目录中丢失的 getPrototypeOf
文件:
ERROR in ./node_modules/@material-ui/core/styles/withTheme.js
Module not found: Error: Can't resolve '@babel/runtime/helpers/getPrototypeOf' in '/project/node_modules/@material-ui/core/styles'
@ ./node_modules/@material-ui/core/styles/withTheme.js 20:46-94
@ ./node_modules/@material-ui/core/styles/index.js
@ ./src/components/Root.js
@ ./src/app.js
@ multi babel-regenerator-runtime ./src/app.js
ERROR in ./node_modules/react-event-listener/dist/react-event-listener.cjs.js
Module not found: Error: Can't resolve '@babel/runtime/helpers/getPrototypeOf' in '/project/node_modules/react-event-listener/dist'
@ ./node_modules/react-event-listener/dist/react-event-listener.cjs.js 10:38-86
@ ./node_modules/@material-ui/core/Popover/Popover.js
@ ./node_modules/@material-ui/core/Popover/index.js
@ ./src/components/Header/AnonymousMenu.js
@ ./src/components/Header/index.js
@ ./src/components/ListeningRoute.js
@ ./src/components/Root.js
@ ./src/app.js
@ multi babel-regenerator-runtime ./src/app.js
如果我在 node_modules 中搜索文件,除根目录外的所有目录都包含文件:
$ for dir in $(find node_modules -name 'runtime'); do ls $dir/helpers/getPrototypeOf.js; done
node_modules/recompose/node_modules/@babel/runtime/helpers/getPrototypeOf.js
node_modules/@material-ui/icons/node_modules/@babel/runtime/helpers/getPrototypeOf.js
node_modules/@material-ui/core/node_modules/@babel/runtime/helpers/getPrototypeOf.js
node_modules/react-event-listener/node_modules/@babel/runtime/helpers/getPrototypeOf.js
ls: cannot access 'node_modules/@babel/runtime/helpers/getPrototypeOf.js': No such file or directory
node 模块应该递归搜索依赖项,这样我们就可以在不破坏项目的情况下同时使用一个包的多个版本,但在这种情况下,它们实际上是在根 node_modules/
目录中搜索它们。
其他混淆来自于我们在项目中仍然使用 babel v6,但 @babel
安装在 project/node_modules
。
有人可以解释为什么会发生这种行为,如果这是一个纯纱线问题,以及如何解决这个问题?或者它可能与 webpack 有关?
我想在一段时间内使用 Material-ui v0 和 v3 的并发版本,但目前的解决方案是向 v3 的硬迁移(以及将 babel 从 v6 迁移到v7).这确实阻碍了我们的迁移。
注意:cp node_modules/@material-ui/core/node_modules/@babel/runtime/helpers/getPrototypeOf.js node_modules/@babel/runtime/helpers
删除所有 webpack 错误...
在 webpack 中有一个名为 resolve 的选项。您必须设置解析选项,以便@material-ui 将使用他们自己的node_modules
。当前@material-ui 使用您通过 npm 或 yarn 安装的最上面的 node_modules
导入依赖项。
在你的 webpack 配置中包含
module.exports = {
...
resolve : {
modules : ['node_modules']
},
...
}
通过这样做,webpack 将在相对目录中查找 node_modules
。