手动建立基于webpack+babel的react运用(babel7)

2019年8月31日 147次阅读 来源: lvjiajiajia

搭建一个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文件内容
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <div id="app"></div>
        <script src="bundle.js"></script>
    </body>
</html>

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

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

class App extends React.Component {
render(){
  return <div>hello world</div>
    }
}
ReactDOM.render(<App />, 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启动你的项目吧！结果如图

《手动建立基于webpack+babel的react运用(babel7)》

    原文作者：lvjiajiajia
    原文地址: https://segmentfault.com/a/1190000018224417
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞