yargs – require函数用于不能静态提取依赖关系的方式
我正在尝试为我正在开发的一个项目开发一个模块。 在将一些核心代码拆分到一个单独的目录并尝试使用import Noxel from 'noxel'来包含模块之后，会出现一些警告/错误。
node_modules/noxel/index
/* Create the core Noxel class */ const Noxel = function () { this.start = require('./bin/dev-server') //this.sendRequest = require('./lib/sendRequest') } Noxel.prototype.init = require('./lib/init') module.exports = new Noxel()
在我的索引文件中包含通过const Noxel = require('noxel')文件正常工作：
/index
const Noxel = require('noxel') const models = require('./models') /* Init Noxel */ Noxel.init({ models: models }) Noxel.start()
但是，将其包含到与import Noxel from 'noxel'不同的文件中：
src/modules/userauth
import { push } from 'react-router-redux' import Noxel from 'noxel' // ------------------------------------ // Constants // ------------------------------------ export const USERAUTH_LOGIN_REQUEST = 'USERAUTH_LOGIN_REQUEST' export const USERAUTH_LOGIN_SUCCESS = 'USERAUTH_LOGIN_SUCCESS' ...
产生这个警告：
警告在./~/noxel/~/yargs/index.js中严重依赖关系：11：39-46 require函数的使用方式不能静态提取依赖项@ ./~/noxel/~/yargs/index。 [士11：39-46]
这是我的webpackconfiguration：
webpack.config.js
const argv = require('yargs').argv const webpack = require('webpack') const cssnano = require('cssnano') const HtmlWebpackPlugin = require('html-webpack-plugin') const ExtractTextPlugin = require('extract-text-webpack-plugin') const project = require('./project.config') const debug = require('debug')('app:config:webpack') const __DEV__ = project.globals.__DEV__ const __PROD__ = project.globals.__PROD__ const __TEST__ = project.globals.__TEST__ debug('Creating configuration.') const webpackConfig = { name : 'client', target : 'web', devtool : project.compiler_devtool, resolve : { root : project.paths.client(), extensions : ['', '.js', '.jsx', '.json'] }, module : {} } // ------------------------------------ // Entry Points // ------------------------------------ const APP_ENTRY = project.paths.client('main.js') webpackConfig.entry = { app : __DEV__ ? [APP_ENTRY].concat(`webpack-hot-middleware/client?path=${project.compiler_public_path}__webpack_hmr`) : [APP_ENTRY], vendor : project.compiler_vendors } // ------------------------------------ // Bundle Output // ------------------------------------ webpackConfig.output = { filename : `[name].[${project.compiler_hash_type}].js`, path : project.paths.dist(), publicPath : project.compiler_public_path } // ------------------------------------ // Externals // ------------------------------------ webpackConfig.externals = {} webpackConfig.externals['react/lib/ExecutionEnvironment'] = true webpackConfig.externals['react/lib/ReactContext'] = true webpackConfig.externals['react/addons'] = true // ------------------------------------ // Plugins // ------------------------------------ webpackConfig.plugins = [ new webpack.DefinePlugin(project.globals), new HtmlWebpackPlugin({ template : project.paths.client('index.html'), hash : false, favicon : project.paths.public('favicon.ico'), filename : 'index.html', inject : 'body', minify : { collapseWhitespace : true } }) ] // Ensure that the compiler exits on errors during testing so that // they do not get skipped and misreported. if (__TEST__ && !argv.watch) { webpackConfig.plugins.push(function () { this.plugin('done', function (stats) { if (stats.compilation.errors.length) { // Pretend no assets were generated. This prevents the tests // from running making it clear that there were warnings. throw new Error( stats.compilation.errors.map(err => err.message || err) ) } }) }) } if (__DEV__) { debug('Enabling plugins for live development (HMR, NoErrors).') webpackConfig.plugins.push( new webpack.HotModuleReplacementPlugin(), new webpack.NoErrorsPlugin() ) } else if (__PROD__) { debug('Enabling plugins for production (OccurenceOrder, Dedupe & UglifyJS).') webpackConfig.plugins.push( new webpack.optimize.OccurrenceOrderPlugin(), new webpack.optimize.DedupePlugin(), new webpack.optimize.UglifyJsPlugin({ compress : { unused : true, dead_code : true, warnings : false } }), new webpack.optimize.AggressiveMergingPlugin() ) } // Don't split bundles during testing, since we only want import one bundle if (!__TEST__) { webpackConfig.plugins.push( new webpack.optimize.CommonsChunkPlugin({ names : ['vendor'] }) ) } // ------------------------------------ // Loaders // ------------------------------------ // JavaScript / JSON webpackConfig.module.loaders = [{ test : /\.(js|jsx)$/, exclude : /node_modules/, loader : 'babel', query : project.compiler_babel }, { test : /\.json$/, loader : 'json' }] // ------------------------------------ // Style Loaders // ------------------------------------ // We use cssnano with the postcss loader, so we tell // css-loader not to duplicate minimization. const BASE_CSS_LOADER = 'css?sourceMap&-minimize' webpackConfig.module.loaders.push({ test : /\.scss$/, exclude : null, loaders : [ 'style', BASE_CSS_LOADER, 'postcss', 'sass?sourceMap' ] }) webpackConfig.module.loaders.push({ test : /\.css$/, exclude : null, loaders : [ 'style', BASE_CSS_LOADER, 'postcss' ] }) webpackConfig.sassLoader = { includePaths : project.paths.client('styles') } webpackConfig.postcss = [ cssnano({ autoprefixer : { add : true, remove : true, browsers : ['last 2 versions'] }, discardComments : { removeAll : true }, discardUnused : false, mergeIdents : false, reduceIdents : false, safe : true, sourcemap : true }) ] // File loaders /* eslint-disable */ webpackConfig.module.loaders.push( { test: /\.woff(\?.*)?$/, loader: 'url?prefix=fonts/&name=[path][name].[ext]&limit=10000&mimetype=application/font-woff' }, { test: /\.woff2(\?.*)?$/, loader: 'url?prefix=fonts/&name=[path][name].[ext]&limit=10000&mimetype=application/font-woff2' }, { test: /\.otf(\?.*)?$/, loader: 'file?prefix=fonts/&name=[path][name].[ext]&limit=10000&mimetype=font/opentype' }, { test: /\.ttf(\?.*)?$/, loader: 'url?prefix=fonts/&name=[path][name].[ext]&limit=10000&mimetype=application/octet-stream' }, { test: /\.eot(\?.*)?$/, loader: 'file?prefix=fonts/&name=[path][name].[ext]' }, { test: /\.svg(\?.*)?$/, loader: 'url?prefix=fonts/&name=[path][name].[ext]&limit=10000&mimetype=image/svg+xml' }, { test: /\.(png|jpg)$/, loader: 'url?limit=8192' }, { test: /\.mp4$/, loader: 'url?limit=10000&mimetype=video/mp4'} ) /* eslint-enable */ // ------------------------------------ // Finalize Configuration // ------------------------------------ // when we don't know the public path (we know it only when HMR is enabled [in development]) we // need to use the extractTextPlugin to fix this issue: // http://stackoverflow.com/questions/34133808/webpack-ots-parsing-error-loading-fonts/34133809#34133809 if (!__DEV__) { debug('Applying ExtractTextPlugin to CSS loaders.') webpackConfig.module.loaders.filter((loader) => loader.loaders && loader.loaders.find((name) => /css/.test(name.split('?')[0])) ).forEach((loader) => { const first = loader.loaders[0] const rest = loader.loaders.slice(1) loader.loader = ExtractTextPlugin.extract(first, rest.join('!')) delete loader.loaders }) webpackConfig.plugins.push( new ExtractTextPlugin('[name].[contenthash].css', { allChunks : true }) ) } module.exports = webpackConfig
这个问题是由于在ES6中编写模块，而忽略了使用babel的node_modules文件夹。 我通过在ES5中重新编写模块来解决这个问题。