使用 Babel + React + Webpack 搭建 Web 应用

Posted 2020-08-03 web倩倩

话不说直接上正题。

环境搭建

1. Babel--目前浏览器对于ES6的语法解析支持度还不高，所以要通过转码在编译，所以在使用ES6之前要安装Babel，之前安装的时候遇到了一些问题但是没有全部记录下来，现在只能是尽力重现一下。

　　Babel6版本开始已经不支持使用npm install babel -g 安装了，它分成了几个部分

• babel cli,适用于命令行
• babel-core，包含node api

npm install babel-cli -g
npm install babel-core --save-dev

　　babel需要手动安装插件

npm install babel-preset-es2015

　　

然后在命令行输入vim .babelrc在文件夹下面创建一个叫.babelrc的文件，并写入如下代码：

{
	"presets": ["es2015"]
}

然后保存退出。

2.配置webpack

可以参考

 http://www.cnblogs.com/vajoy/p/4650467.html

首先记录下webpack的使用

1、新建一个文件夹存放我们的项目

npm init 创建package.json的配置文件

2、把webpack保存到本地依赖里面

npm install webpack --save-dev

3、单个文件打包

新建js文件entry.js里面写上js代码，然后使用

webpack entry.js  bundle.js

即可在本地目录生成一个打包好的bundle.js，然后把bundle.js引入到页面中

4、webpack默认打包js文件，如果我们需要打包css文件需要加载相应的loader

例如：css需要加载的loader有css-loader和style-loader

npm install css-loader style-loader  --save-dev

然后在入口文件entry.js中加入

require(\'style!css! ./style.css\');  //把css当做模块加载进来

5、文件太多时候这样写就过于繁琐了，我们可以使用webpack.config.js文件定义webpack的配置，

module.exports ={
  entry:\'./entry.js\', //定义的入口文件
  output:{
    path: __dirname,  //打包好的文件的路径
    filename: \'bundle.js\' //打包好的文件名
  },
  devtool:\'source-map\',  //生成source-map 可以在浏览器通过sourcemap看到我们写的打包之前的文件，便于调试  （可以在打包之前的文件需要调试的地方加入 debugger；作用类似于断点）
  module:{  //当打包的文件中使用了loader时候我们需要这样写
    loaders:[
      {test:/\\.js$/, exclude:/node_modules /, loader: \'react-hot!babel\'},   //exclude 指的是排除那些文件不打包
      {test:/\\.css$/, loader:\'style!css\'}

    ]
  }
}

6、在webpack中使用babel

首先得在本地安装babel需要的依赖

npm install babel-loader babel-core babel-preset-es2015 --save-dev

　　然后在项目根目录下增加.babelrc文件里面输入

{
  presets:["es2015"]  
}

　　总和使用webpack+babel+react

首先在项目本地安装依赖

npm install babel-core babel-preset-es2015 babel-preset-react webpack webpack-dev-server babel-loader react-hot-loader --save-dev

　　然后安装react的

npm install react react-dom --save

　　然后在项目中配置.babelrc

{
  "presets":["es2015","react"]
}

　　新建一个name.js

" use strict";
import React from "react";

class Name extends React.Component{
  render(){
    return(
      <div>
        hello~~ yang <input />
      </div>
    );
  }
}
export {Name as default};

　　然后在entry.js入口文件中配置

"use strict";

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

import Name from \'./name\';


ReactDOM.render(
  <Name />,
  document.getElementById(\'app\')
);

　　webpack.config.js配置

module.exports ={
  entry:\'./entry.js\',
  output:{
    path: __dirname,
    filename: \'bundle.js\'
  },
  devtool:\'source-map\',
  module:{
    loaders:[
      {test:/\\.js$/, exclude:/node_modules /, loader: \'react-hot!babel\'},
      {test:/\\.css$/, loader:\'style!css\'}

    ]
  }
}

　　然后在package.json中加一句话在

"scripts": {
    "test": "echo \\"Error: no test specified\\" && exit 1",
    "watch": "webpack-dev-server --inline --hot"
  },

　　然后在控制台运行  

npm run watch

　　就能在浏览器中访问  http://localhost:8080