node_modules中的js编译问题

昨晚遇到一个很奇怪的问题,在node_modules中引入一个第三方库react-svg-joystick,公司的电脑上编译没有问题,但在家里的电脑上却会编译报错,报错内容如下

Module parse failed: /Users/hoyt/vscode/FEngine/node_modules/_react-svg-joystick@1.0.0@react-svg-joystick/src/index.js Unexpected token (10:19)
You may need an appropriate loader to handle this file type.

仔细查看了报错信息,很快就找到了问题,npm对node_modules中的库进行了link处理,编译器解析时访问的路径实际上是node_modules/_react-svg-joystick,库的名字带了一个下划线,正是因为npm的这个link行为,导致编译器实际上在处理_react-svg-joystick@1.0.0@react-svg-joystick/src/index.js这个文件是,拿到的是一个symlink,而没有使用js/jsx的对应loader来处理这个问题,导致了解析报错。

解决的方式也很简单,就是强制指定路径为module的实际路径,而非link路径。如下所示:

 {
                test: /\.jsx?$/,
                include: [path.resolve(__dirname, 'src'), fs.realpathSync(path.resolve(__dirname, './node_modules/react-svg-joystick/src'))],
                loader: 'babel-loader',
                query: {
                    presets: ['react', 'es2015', 'stage-0'],
                }
            }
Show Comments

Get the latest posts delivered right to your inbox.