2017-10-19 197 views
2

我目前正在从Webpack 1升级到2,然后升级到3.在此升级过程中,我已按照说明遵守迁移说明对于1 => 2和对于2 => 3Webpack升级 - 找不到模块:无法解析node_modules

我遇到的问题是,我的node_modules中已安装的软件包似乎没有在client/app/bundles的代码中得到解决。我得到的所有node_modules错误是以下结构:

ERROR in ./node_modules/alt/lib/store/StoreMixin.js || Module not found: Error: Can't resolve 'transmitter' in 'client/node_modules/alt/lib/store'

我的理论是什么地方我对file-loaderexpose-loaderimports-loader版本不匹配,因为它是有道理的,如果没有正确的版本,这些模块不会被导入。我确保所有的module.rules都有以-loader模式结尾的加载程序。 yarn install也成功没有错误。是

我的依赖和配置的WebPack如下:

的package.json

"dependencies": { 
    "ajv": "^5.1.5", 
    "alt": "^0.17.8", 
    "alt-container": "^1.0.2", 
    "autoprefixer": "^6.4.0", 
    "axios": "^0.7.0", 
    "babel-cli": "^6.10.1", 
    "babel-core": "^6.3.26", 
    "babel-loader": "^7.1.2", 
    "babel-plugin-syntax-decorators": "^6.3.13", 
    "babel-polyfill": "^6.3.14", 
    "babel-preset-es2015": "^6.3.13", 
    "babel-preset-react": "^6.3.13", 
    "babel-preset-stage-0": "^6.3.13", 
    "babel-types": "^6.4.5", 
    "body-parser": "^1.14.1", 
    "chai": "^3.4.1", 
    "chai-enzyme": "^0.6.1", 
    "css-loader": "^0.23.1", 
    "enzyme": "^2.5.0", 
    "es5-shim": "^4.1.14", 
    "es6-promise": "^3.0.2", 
    "expose-loader": "^0.7.1", 
    "fbjs": "^0.8.16", 
    "file-loader": "^1.1.5", 
    "fixed-data-table-2": "^0.7.11", 
    "immutable": "^3.7.5", 
    "imports-loader": "^0.6.5", 
    "jade": "^1.11.0", 
    "jquery": "^2.1.4", 
    "jquery-ujs": "^1.1.0-1", 
    "jsdom": "^7.0.2", 
    "loader-utils": "^0.2.11", 
    "lodash": "^4.11.1", 
    "lodash-uuid": "^0.0.3", 
    "mocha-jsdom": "^1.0.0", 
    "moment": "^2.11.1", 
    "postcss-loader": "^0.10.1", 
    "react": "^15.6.1", 
    "react-addons-test-utils": "15.4.0", 
    "react-bootstrap": "^0.30.3", 
    "react-dnd": "^2.5.4", 
    "react-dnd-html5-backend": "^2.0.0", 
    "react-dnd-test-backend": "^1.0.0", 
    "react-dom": "^15.6.1", 
    "react-fa": "^4.1.2", 
    "react-height": "^3.0.0", 
    "react-json-tree": "^0.10.9", 
    "react-on-rails": "10.0.0", 
    "react-onclickoutside": "^5.7.0", 
    "react-overlays": "^0.6.2", 
    "react-select": "^1.0.0-rc.3", 
    "react-table": "^6.0.5", 
    "react-textarea-autosize": "^4.0.5", 
    "sass-loader": "^6.0.6", 
    "sinon": "^1.17.2", 
    "sinon-chai": "^2.8.0", 
    "sleep": "^3.0.0", 
    "source-map": "^0.6.1", 
    "uglify-js": "^2.8.29", 
    "url-loader": "^0.5.6", 
    "webpack": "^3.1.0", 
    "webpack-dev-server": "^2.9.2" 
    }, 
    "devDependencies": { 
    "babel-eslint": "^6.1.0", 
    "babel-istanbul": "^0.11.0", 
    "babel-plugin-react-transform": "^2.0.0", 
    "bootstrap-loader": "^2.0.0", 
    "bootstrap-sass": "^3.3.6", 
    "eslint": "^3.3.0", 
    "eslint-config-airbnb": "^10.0.1", 
    "eslint-config-shakacode": "^0.0.1", 
    "eslint-plugin-import": "^1.13.0", 
    "eslint-plugin-jsx-a11y": "^2.1.0", 
    "eslint-plugin-react": "^6.0.0", 
    "esprima-fb": "^15001.1001.0-dev-harmony-fb", 
    "express": "^4.13.3", 
    "extract-text-webpack-plugin": "3.0.1", 
    "image-webpack-loader": "^3.1.0", 
    "mocha": "^2.3.3", 
    "mocha-jenkins-reporter": "^0.1.9", 
    "mocha-jsdom": "^1.0.0", 
    "node-sass": "4.0.0", 
    "react-loadable": "^5.3.0", 
    "react-transform-hmr": "^1.0.1", 
    "resolve-url-loader": "^1.4.3", 
    "style-loader": "^0.19.0", 
    "stylelint": "^7.1.0", 
    "stylelint-config-standard": "^12.0.0" 
} 

文件结构

webpack.client.rails.config.js 
app 
    /assets 
     /javascripts 
      /generated 
      -- app-bundle.js 
      -- vendor-bundle.js 
client 
    /app 
     /bundles 
      /[APP ENTRY]... 
    /node_modules 
    webpack.client.rails.config.js 
    webpack.client.base.config.js 

webpack.client.rails.config.js

const webpack = require('webpack'); 
const path = require('path'); 
const config = require('./webpack.client.base.config'); 

const devBuild = process.env.NODE_ENV !== 'production'; 

const autoprefixer = require('autoprefixer'); 

config.output = { 
    filename: '[name]-bundle.js', 
    path: path.resolve('../app/assets/javascripts/generated'), 
    publicPath: path.resolve('/assets/generated/'), 
}; 

config.entry.vendor.unshift(
    'es5-shim/es5-shim', 
    'es5-shim/es5-sham' 
); 

config.entry.vendor.push('jquery-ujs'); 

config.module.rules.push(
    { 
    test: /\.jsx?$/, 
    loader: 'babel-loader', 
    exclude: /node_modules/, 
    }, 
    { 
    test: require.resolve('react'), 
    loader: 'imports-loader?shim=es5-shim/es5-shim&sham=es5-shim/es5-sham', 
    }, 
    { 
    test: require.resolve('jquery-ujs'), 
    loader: 'imports-loader?jQuery=jquery', 
    }, 
    { 
    test: /\.css$/, 
    loader: 'style-loader!css-loader', 
    }, 
    { 
    test: /\.scss$/, 
    use: [ 
     'style-loader', 
     'css-loader', 
     { 
     loader: 'postcss-loader', 
     options: { 
      plugins: function() { 
      return [autoprefixer] 
      } 
     } 
     }, 
     'sass-loader', 
    ], 
    exclude: /assets\/stylesheets\/common\/packages\/DocumentEditor/, 
    }, 
    { 
    test: /\.scss$/, 
    use: [ 
     'style-loader?{"singleton":true,"attrs":{"id":"document-content-stylesheet"}}', 
     'css-loader', 
     { 
     loader: 'postcss-loader', 
     options: { 
      plugins: function() { 
      return [autoprefixer] 
      } 
     } 
     }, 
     'sass-loader', 
    ], 
    include: /assets\/stylesheets\/common\/packages\/DocumentEditor/, 
    }, 
    { 
    test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
    loader: 'file-loader', 
    }, 
    { 
    test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
    loader: 'url-loader?limit=10000&mimetype=application/font-woff', 
    } 
); 

module.exports = config; 

if (devBuild) { 
    console.log('Webpack dev build for Rails'); // eslint-disable-line no-console 
    module.exports.devtool = 'eval-source-map'; 
} else { 
    config.plugins.push(
    new webpack.optimize.DedupePlugin() 
); 
    console.log('Webpack production build for Rails'); // eslint-disable-line no-console 
} 

个webpack.client.base.config.js

const webpack = require('webpack'); 
const path = require('path'); 
const aliases = require('./aliases'); 

const devBuild = process.env.NODE_ENV !== 'production'; 
const nodeEnv = devBuild ? 'development' : 'production'; 

module.exports = { 

    context: __dirname, 
    entry: { 

    vendor: [ 
     'babel-polyfill', 
     'jquery', 
    ], 

    app: [ 
     './app/bundles/BundleOne/startup/clientRegistration', 
     './app/bundles/BundleTwo/startup/clientRegistration', 
     './app/bundles/BundleThree/startup/clientRegistration', 
     './app/bundles/BundleFour/startup/clientRegistration', 
     './app/bundles/BundleFive/startup/clientRegistration', 
     './app/bundles/BundleSix/startup/clientRegistration', 
     './app/bundles/BundleSeven/startup/clientRegistration', 
    ], 
    }, 
    resolve: { 
    modules: [ 
     path.resolve('./app/bundles'), 
    ], 
    extensions: ['.js', '.jsx'], 
    alias: aliases, 
    }, 
    plugins: [ 
    new webpack.DefinePlugin({ 
     'process.env': { 
     NODE_ENV: JSON.stringify(nodeEnv), 
     }, 
    }), 

    new webpack.optimize.CommonsChunkPlugin({ 
     name: 'vendor', 
     filename: 'vendor-bundle.js', 
     minChunks: Infinity, 
    }), 
    ], 
    module: { 
    rules: [ 
     { test: require.resolve('jquery'), loader: 'expose-loader?jQuery' }, 
     { test: require.resolve('jquery'), loader: 'expose-loader?$' }, 
    ], 
    }, 
}; 
+0

也尝试使用'resolveLoaders.modules',但[文档](https://webpack.github.io/docs/configuration.html#resolveloader)不是特别清楚它们的用法。 – Xenyal

回答

2

我认为问题是,当你设置你的webpack.client.base.config.js以下选项:

resolve: { 
    modules: [ 
    path.resolve('./app/bundles'), 
    ], 
    extensions: ['.js', '.jsx'], 
    alias: aliases, 
}, 

覆盖默认解析模块选项,这是

resolve: { modules: ['node_modules'] }

如果你想的WebPack在你的包藏汉文件夹作为节点模块文件夹中找到的模块,你应该尝试类似以下内容:

resolve: { 
    modules: [ 
    path.resolve('./app/bundles'), 
    'node_modules' 
    ], 
    extensions: ['.js', '.jsx'], 
    alias: aliases, 
}, 

编辑:还有,你不应该看的WebPack 1文档,如果您尝试升级到webpack 2.请参阅the latest documentation

相关问题