react开发路上的QA

发表于 | 阅读次数:
1、问题
1
2
3
Error: Module 'C:\Users\angelama\Desktop\新建文件夹\react-to-do-list\node_modules\babel-core\index.js' is not a loader (must have normal or pitch function)
    at loadLoader (C:\Users\angelama\Desktop\新建文件夹\react-to-do-list\node_modules\loader-runner\lib\loadLoader.js:35:10)
    at iteratePitchingLoaders

解决办法：
webpack2已经不支持省略loader后缀，需要babel-loader

1
2
3
4
5
6
7
8
9
10
11
//webpack.config.js
module:{
        //loaders加载器
        loaders: [
            {
                test: /\.(js|jsx)$/,//一个匹配loaders所处理的文件的拓展名的正则表达式，这里用来匹配js和jsx文件（必须）
                exclude: /node_modules/,//屏蔽不需要处理的文件（文件夹）（可选）
                loader: 'babel-loader'//loader的名称（必须）
            }
        ]
    }
2、问题

npm run dev报错

1
2
3
4
5
Invalid configuration object. webpack-dev-server has been initialised using a configuration object that does not match the API schema.
 - configuration has an unknown property 'process'. These properties are valid:
   object { hot?, hotOnly?, lazy?, bonjour?, host?, allowedHosts?, filename?, publicPath?, port?, socket?, watchOptions?, headers?, clientLogLevel?, overlay?, progress?, key?, cert?, ca?, pfx?, pfxPassphrase?
, requestCert?, inline?, disableHostCheck?, public?, https?, contentBase?, watchContentBase?, open?, useLocalIp?, openPage?, features?, compress?, proxy?, historyApiFallback?, staticOptions?, setup?, before?,
 after?, stats?, reporter?, noInfo?, quiet?, serverSideRender?, index?, log?, warn? }

自动刷新的方式：
在网页中嵌入了一个 iframe ，将我们自己的应用注入到这个 iframe 当中去，因此每次你修改的文件后，都是这个 iframe 进行了 reload

解决办法：
修改webpack.config.js配置,不要加 colors,progress 等，webpack2已经不支持这些

1
2
3
4
devServer: {
    historyApiFallback: true,
    inline: true,//注意：不写hot: true，否则浏览器无法自动更新；也不要写colors:true，progress:true等，webpack2.x已不支持这些
},

3.antd引入样式文件

报错：

1
2
error in ./node_moudle/antd/dist/antd.css   
Moudle parse failed:Unexpected character'@'

解决办法：webpack.config.js中 exclude注释掉，不然不会解析node_moudle中的文件

1
2
3
4
5
{
    test: /\.(scss|css)$/,
    use: ['style-loader','css-loader','sass-loader'],
    // exclude: /node_modules/,                
}
4. Q:mac执行git命令时候出现：

xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools), missing xcrun at: /Library/Developer/CommandLineTools/usr/bin/xcrun

A:打开终端输入，
xcode-select –install

回车后，系统弹出下载xcode，点击确认，下载完成后即可。（实际上不是下载xcode，可能下载xcode有关插件，下载时长约1分钟）

Remember, in MAC git is attached to XCode’s Command line tools.

Xcode 是运行在操作系统Mac OS X上的集成开发工具（IDE），由苹果公司开发。Xcode是开发OS X 和 iOS 应用程序的最快捷的方式。Xcode 具有统一的用户界面设计，编码、测试、调试都在一个简单的窗口内完成。

5.Q:react-router3 使用出现报错
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Uncaught TypeError: Cannot read property 'func' of undefined 
at Object../node_modules/_react-router@2.8.1@react-router/lib/InternalPropTypes.js (InternalPropTypes.js:9) 
at __webpack_require__ (bootstrap 7fbd0ef …:669) 
at fn (bootstrap 7fbd0ef …:87) 
at Object../node_modules/_react-router@2.8.1@react-router/lib/PropTypes.js (PropTypes.js:12) 
at __webpack_require__ (bootstrap 7fbd0ef …:669) 
at fn (bootstrap 7fbd0ef …:87) 
at Object../node_modules/_react-router@2.8.1@react-router/lib/index.js (index.js:15) 
at __webpack_require__ (bootstrap 7fbd0ef …:669) 
at fn (bootstrap 7fbd0ef …:87) 
at Object../src/App.js (App.css?8811:26) 
at __webpack_require__ (bootstrap 7fbd0ef …:669) 
at fn (bootstrap 7fbd0ef …:87) 
at Object../src/index.js (index.css?06e0:26) 
at __webpack_require__ (bootstrap 7fbd0ef …:669) 
at fn (bootstrap 7fbd0ef …:87) 
at Object.0 (myTab.js:69) 
at __webpack_require__ (bootstrap 7fbd0ef …:669) 
at bootstrap 7fbd0ef …:715 
at bundle.js:719

A:react16 的不能兼容 react-router 2/3 如果要用 react-router2/3,需将 react 降级到 15