手动创建基于webpack+babel的react应用(babel7)

alaege 发布于2019-08-23 15:20 / 1942人阅读

摘要：搭建一个项目环境首先生成文件至此我们就可以安装的相关依赖了。下的依赖核心部分，把转化成外部引用辅助函数和内置函数，自动填充代码而不会污染全局变量。入口文件我在中配的，所以在下新建文件，添加我们的第一个组件。

搭建一个React项目环境

首先npm init生成package.json文件.
至此我们就可以安装react的相关依赖了。

npm install react --save
npm install react-dom --save

安装完react相关，下一步安装webpack

npm install webpack --save-dev
npm install webpack-dev-server --save-dev //实现热加载

webpack安装完babel是重头戏！babel更新了7版本后，舍弃了以前的 babel-- 的命名方式，改成了@babel/--的命名方式，通过试错后，将常用依赖，以及.babelrc文件配置在此列出以供参考。

//devDependencies下的依赖
npm install @babel/core --save-dev  //babel核心部分，把ES6转化成ES5
npm install @babel/plugin-transform-runtime --save-dev  //外部引用辅助函数和内置函数，自动填充代码而不会污染全局变量。
npm install @babel/preset-env --save-dev  //提供环境的映射获得插件列表并传递给babel
npm install @babel/preset-react --save-dev  //解析JSX
npm install babel-loader --save-dev  //webpack需要用到这个loader

//dependencies下的依赖
npm install @babel/polyfill --save  //转义es6的API
npm install @babel/runtime --save  //babel变换运行时插件的依赖

上述是babel的环境安装，下面来看下.babelrc的文件配置，在根目录下创建.babelrc文件

//.babelrc文件内容
{
"presets": ["@babel/preset-env", "@babel/preset-react"],
"plugins": ["@babel/plugin-transform-runtime"]
}

下面在根目录新建一个webpack.config.js文件，加入以下内容

var webpack = require("webpack");
module.exports = {
  entry: "./src/app.js",
  output: {
      path: __dirname + "/build",
      filename: "bundle.js"},module: {
      rules: [
        { test: /.js$/, exclude: /node_modules/, loader: "babel-loader" }
             ]      
      }
}

基本上配置内容都OK了！下面添加页面内容

添加页面内容

基本配置都有了，现在要往里面增加内容了，首先第一步在根目录下创建index.html文件，之后在根目录创建src文件夹用来放我们新增的组件。
入口文件我在webpack中配的./src/app.js，所以在src下新建app.js文件，添加我们的第一个组件。

//根目录下index.html文件内容


    
        
        Document
    
    
        
        
    


//src下的app.js文件内容

import React from "react";
import ReactDOM from "react-dom";

class App extends React.Component {
render(){
  return hello world
    }
}
ReactDOM.render(, document.getElementById("app"));

现在内容有了，我们把package.json中的script部分改成这样：

"scripts": {
    "start": "webpack-dev-server --hot --inline --mode development --colors --content-base",
    "build": "webpack --progress --colors --mode production"
}

大功告成啦！现在使用npm start启动你的项目吧！效果如图

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101900.html

如何搭建一个基于react、webpack4、babel7的项目（一）

摘要：对的工作流程有点模糊，以及据官方文档称的升级，性能得到了极大的提升，而还是用的，于是决定从头开始搭建一个适合团队的脚手架。保证各文件获得一致的文件编码和缩进效果。这些在后面文章中，都会一个个涉及到，此处不做详细展开。前言写前端项目这么久了，以前用的 dva 框架，后来用过 create-react-app 框架，都需要针对团队做一些定制化的修改。对 webpack 的工作流程有点模...

IamDLY 2019-08-23 12:30 评论0 收藏0
基于webpack4.x, babel7.x 搭建的多页面脚手架, 简化前端开发环境配置，开箱即用，

摘要：开箱即用的多页面脚手架基于模块化开发可复用的现代化网站感兴趣的朋友，请点个及时关注项目更新请点个项目请提特性支持前后端分离开发配置完整的打包方案支持本地开发热更新集成代码风格校验支持编写源码，编译生成生产代码内置开发环境，自动加样式前缀自 Webpack-seed 开箱即用的多页面脚手架, 基于webpack4.2x babel7.1x模块化开发可复用的现代化网站(Without Vu...

junfeng777 2019-08-23 12:29 评论0 收藏0
babel-polyfill的相关知识

摘要：与简单来说包括了和转义和的包。虽然实际压缩已经能够优化掉大部分体积的，但是对于一些最新浏览器版本来说，任何的都是浪费资源的。以服务端渲染的方式从请求中获取到的信息，然后返回对应的。使用@babel/polyfill可以让你在任何es2015+的环境中编写代码，而不需要担心兼容性问题。它会在全局变量上添加一些类似于原生的方法。但是webpack一直以来配置都特别复杂，直到webpack...

seal_de 2019-08-23 18:18 评论0 收藏0
react项目配置babel7

摘要：项目配置不多说，先上配置总结的包都是以开头的，所有的模块插件啥的都是在目录下中真正干活的是插件，插件的作用是预置，就是一个插件包的集合，你也可以自己写插件包插件包不够用，再配置呗配置了肯定要用新版本的老版本的会找而不是会 babel7 React项目配置不多说，先上babelrc配置 { presets: [ [ @babel/env, { ...

XGBCCC 2019-08-26 10:26 评论0 收藏0