在Babel插件中添加React的依赖,在生成的代码中添加require语句来引入React。示例如下:
插件代码(示例为基于babel-plugin-transform-react-jsx插件):
// 依赖包
const {declare} = require('@babel/helper-plugin-utils');
const jsx = require('@babel/plugin-transform-react-jsx');
// 插件
module.exports = declare((api, options) => {
api.assertVersion(7);
// 在插件中添加React的依赖包
const reactImport = `import React from 'react'`;
return {
// 在代码顶部添加React的导入
pre(file) {
file.set('helperGenerator', name => `'${name}' in this ? this['${name}'] : React['${name}']`);
file.set('importTemplate', reactImport);
},
// 使用require语句引入React
visitor: jsx({runtime: 'classic'})
};
});
生成的代码示例(不使用插件时):
const App = () => Hello, World!
;
ReactDOM.render(
,
document.getElementById('root')
);
生成的代码示例(使用插件时):
import React from 'react';
const App = () => React.createElement('h1', null, 'Hello, World!');
ReactDOM.render(
React.createElement(App, null),
document.getElementById('root')
);