基於webpack接入React包安裝

時間 2019-11-11

原文原文鏈接

在使用babel的項目中接入React 框架很簡單，只須要加入React所依賴的Presets babel-preset-react. 安裝react, react-dom, webpack 在項目根目錄下執行下面命令，其中--save的含義是項目上線運行所需的包，即生產環境（--save-dev是開發環境所需的包）。html

npm install react react-dom --save-dev
npm install webpack --save-dev

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
            /* react DOM*/
    </div>
    <script src="bundle.js"></script>
</body>
</html>

index.js

import React, { Component } from 'react';
import { render } from 'react-dom';

render(
    <div>Hello React!</div>,
    document.getElementById('app')
);

webpack-config.js

webpack.config.js
複製代碼
const path = require('path');
module.exports = {
    entry: path.resolve(__dirname, '../src/index.js'), //指定入口文件，程序從這裏開始編譯,__dirname當前所在目錄, ../表示上一級目錄, ./同級目錄
    output: {
        path: path.resolve(__dirname, '../dist'), // 輸出的路徑
        filename: 'bundle.js'  // 打包後文件
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['es2015', 'react'],
                    }
                },
                exclude: /node_modules/
            }
        ]
    }
}

複製代碼這裏若是在項目根目錄直接進行webpack構建會報錯,由於咱們使用了react，react是使用jsx語法實現的，而jsx不能直接被瀏覽器識別和執行，因此這裏須要引入Babel庫進行轉碼(babel-preset-react)。node

npm install babel-core babel-loader babel-preset-es2015 babel-preset-react --save
babel-loader: babel加載器
babel-preset-es2015: 支持es2015
babel-preset-react: jsx 轉換成js

複製代碼在項目根目錄下新建json文件.babelrc，將babel的配置單獨提取出來。react

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

相關標籤/搜索

react+webpack+redux+react

webpack+react+redux+react

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。