Open OPY-bbt opened 5 years ago
需要写这么一句话是因为 @babel/plugin-transform-react-jsx
插件的原因,它将我们写的jsx语法转化成React.createElement的样子。所以我们在文件顶部需要引入React。
@babel/plugin-transform-react-jsx
插件有一个pragma的配置项,默认是"React.createElement",所以如果你想用import R from 'react'这种方式引入React,那么只需要将pragma配置为"R.createElement"就可以了。webpack配置如下
module.exports = {
//...
module: {
rules: [
{
test: /\.jsx?$/,
exclude: [
path.resolve(__dirname, 'node_modules'),
],
use: {
loader: 'babel-loader',
options: {
plugins: [
"@babel/plugin-syntax-jsx",
["@babel/plugin-transform-react-jsx", { pragma: "R.createElement" }],
"@babel/plugin-transform-react-display-name",
],
},
}
}
],
},
}
如果得了懒癌怎么办?没关系,强大的webpack给我们提供了方法。在webpack中,有一个ProvidePlugin插件可以帮我们自动加载模块而不需要手动import。配置方法如下:
module.exports = {
//...
plugins: [
new webpack.ProvidePlugin({
React: 'react',
}),
],
}
释放你的双手~
为什么需要在组件顶部写import React from 'react'?为了简单能不能写import R from 'react'呢?还有在每个文件里都写这一句也很麻烦,能不能干脆省略这句话呢?答案是都是可以滴~