手動建立基於webpack+babel的react應用(babel7)

時間 2019-11-10

標籤手動建立基於 webpack+babel webpack babel react 應用 babel7 欄目 React 简体版

原文原文鏈接

搭建一個React項目環境

首先npm init生成package.json文件.
至此咱們就能夠安裝react的相關依賴了。html

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

安裝完react相關，下一步安裝webpacknode

npm install webpack --save-dev
npm install webpack-dev-server --save-dev //實現熱加載

webpack安裝完babel是重頭戲！babel更新了7版本後，捨棄了之前的 babel-- 的命名方式，改爲了@babel/--的命名方式，經過試錯後，將經常使用依賴，以及.babelrc文件配置在此列出以供參考。react

//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文件webpack

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

下面在根目錄新建一個webpack.config.js文件，加入如下內容es6

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了！下面添加頁面內容web

添加頁面內容

基本配置都有了，如今要往裏面增長內容了，首先第一步在根目錄下建立index.html文件，以後在根目錄建立src文件夾用來放咱們新增的組件。
入口文件我在webpack中配的./src/app.js，因此在src下新建app.js文件，添加咱們的第一個組件。npm

//根目錄下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部分改爲這樣：json

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

大功告成啦！如今使用npm start啓動你的項目吧！效果如圖babel