React 项目迁移 Webpack Babel7的实现

前端之家收集整理的这篇文章主要介绍了React 项目迁移 Webpack Babel7的实现前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

不久前写了一篇 这里简单说下 React 项目的一些配置;

首先我们新建项目 react-web ,然后进入项目初始化 package.json ;

接下来我们安装 ,这里需要注意一点,是命令行已经单独提取出来了,我们不仅需要安装 webpack 还需要安装

接下来我们开始安装和 react 相关的依赖包;

接下来我们初始化 babel 的配置文件。

然后把下面内容粘贴进去;

实际上 webpack 4 是可以支持无配置构建的,但是我们还是按照传统的方式写一下配置文件;我们新建 webpack.config.js

接下来我们开始 做点和 React 组件相关的东西;

我们在 src 下新建目录 components ;

我们建立一个 Header.js 和 Footer.js .

Footer.js

class Footer extends Component {
constructor() {
super();
this.state = {
year: "2018"
};
}
render() {
return (
<footer class="ft">
copyright © {this.state.year}

); } } export default Footer;

Header.js

Logo ); } } export default Header;

然后我们新增文件 src/index.js

class ReactApp extends Component {
constructor() {
super();
}

render() {
return (
<div class="main">

); } }

ReactDOM.render(,document.getElementById('react-app'));

export default ReactApp;

接下来我们需要预览页面,我们引入下 html-loader

修改我们的 webpack 配置:

我们在 src 下新建 index.html 然后添加下面的内容:

<Meta charset="utf-8"> React & Webpack4
Create a new article

接下来我们安装 webpack-dev-server 在开发时用于起一个服务器预览;

接下来修改 npm scripts:

差不多已经完成一部分了,后面你就可以再安装其他 react 套件了;

当然如果觉得麻烦你也可以使用

扩展阅读

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

原文链接:https://www.f2er.com/js/30281.html

猜你在找的JavaScript相关文章