webstorm+react+webpack-demo

時間  2019-11-14
標籤 webstorm+react+webpack webstorm react webpack demo 欄目 Storm 简体版
原文   原文鏈接

序言：經過這個小例子你也許、大概、可能會掌握如下幾點javascript

一、webstorm如何使用命令行css

二、如何使用webpack的loaders把json格式的文件轉化爲javascript文件html

三、如何使用不一樣的loaders把es6轉換爲瀏覽器能夠識別的javascript文件java

四、對於react而言如何使用合適的loaders把react的JSX文件轉換爲javascript文件node

五、webpack的服務器啓動後如何自動監聽改動的文件以及瀏覽器如何自動刷新。react

準備：安裝好webstorm和nodejswebpack

六、其餘更加詳細參考：這裏es6

1、開始：web

一、新建一個demo04文件夾爲項目根目錄，下面2個子文件夾分別是src和publicnpm

a:public目錄下一個index.html

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

b:src目錄下有

message.json代碼是：

{
  "name":"Life",
  "do":"is a",
  "what":"gradient"
}

createdom.js是爲了獲取message.json的信息並建立dom，算是一個模塊，代碼以下

/**
 * Created by Administrator on 2016/11/12.
 */
var message=require('./message.json');
module.exports = function() {
    var greet=document.createElement('h1');
    greet.innerHTML="<span>"+message.name+"</span>"+"<span>"+message.do+"</span>"+"<span>"+message.what+"</span>";
    return greet;
};

entry.js是webpack的入口文件：

/**
 * Created by Administrator on 2016/11/12.
 */
require('./style.css');
var createdom = require('./createdom.js');
document.getElementById('app').appendChild(createdom());

style.css代碼以下

body {
    min-height: 100%;
    overflow: hidden;
    background-color: #fff;
    /*background: rgba(37,38,33,.8);*/
    font-family: Arial;
}
h1 {
    font-family: arial;
    display: inline-block;
    margin: 0 auto;
    font-weight: 900;
    text-transform: uppercase;
    text-align: center;
    font-size: 9vw;
    line-height: 120%;
    padding: 300px 0;
    -webkit-animation: background 20s linear infinite;
    animation: background 20s linear infinite;
    background: -webkit-linear-gradient(0deg, rgba(150,48,30,1) 0%,rgba(199,201,88,1) 10%,rgba(28,147,46,1) 20%,rgba(74,165,168,1) 30%,rgba(89,90,165,1) 40%,rgba(84,16,67,1) 50%,rgba(28,58,63,1) 60%,rgba(82,175,183,1) 70%,rgba(78,170,76,1) 80%,rgba(150,48,30,1) 90%,rgba(199,201,88,1) 100%);
    background: linear-gradient(90deg, rgba(150,48,30,1) 0%,rgba(199,201,88,1) 10%,rgba(28,147,46,1) 20%,rgba(74,165,168,1) 30%,rgba(89,90,165,1) 40%,rgba(84,16,67,1) 50%,rgba(28,58,63,1) 60%,rgba(82,175,183,1) 70%,rgba(78,170,76,1) 80%,rgba(150,48,30,1) 90%,rgba(199,201,88,1) 100%);
    background-size: 1000% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
span {
    display: block;
}
span:nth-child(1) {
    font-size: 214%;
    line-height: 85%;
    text-indent: -0.33em;
}
span:nth-child(2) {
    font-size: 292%;
    line-height: 69%;
    word-spacing: -0.2em;
    text-indent: -0.07em;
}
@-webkit-keyframes background {
    0%{background-position:0% 50%}
    100%{background-position:100% 50%}
}
@keyframes background {
    0%{background-position:0% 50%}
    100%{background-position:100% 50%}
}

(注：html內引入的bundle.js是webpack最終編譯後自動生成的文件，暫時沒必要理會)

二、點擊webstorm左下角的 Terminal 按鈕彈出內置命令行，進入demo04根目錄，以下圖

輸入：cnpm int快速創建：package.json文件，該文件是描述項目的詳細信息。

三、分別幾個依賴包(上一篇提到過css-loader和style-loader)。

在已經完成:cnpm install webpack -g以後繼續下面

a:cnpm install --save-dev webpack

b:cnpm install --save-dev css-loader

c:cnpm install --save-dev style-loader

d:cnpm install --save-dev json-loader

json-loader是webpack把json文件編譯成javascript

e:cnpm install --save-dev webpack-dev-server

安裝webpack本地服務器依賴包，只要結合webpack.config.js配置好，你的瀏覽器會監測你的代碼修改而且自動刷新！

下面就來建立這個配置文件~~

四、在demo04根目錄建立webpack.config.js文件(webpack的默認的配置文件)，並輸入以下代碼：

/**
 * Created by Administrator on 2016/11/12
 */
var webpack = require('webpack');
module.exports = {
    //二、進出口文件配置
    entry:__dirname+'/src/entry.js',//指定的入口文件,「__dirname」是node.js中的一個全局變量，它指向當前執行腳本所在的目錄
    output: {//輸出
        path: __dirname+'/public',//輸出路徑
        filename: 'bundle.js'//輸出文件名
    },
    module: {//在配置文件裏添加JSON loader
        loaders: [
            {
                test: /\.json$/,
                loader: "json"
            },
            {//三、CSS-loader
                test:/\.css$/,
                loader:'style!css'//添加對樣式表的處理
            }

        ]
    },
    //四、服務器依賴包配置
    devServer: {
        contentBase: "./public",//本地服務器所加載的頁面所在的目錄
        colors: true,//終端中輸出結果爲彩色
        historyApiFallback: true,//不跳轉
        inline: true//實時刷新
    }
}

五、如何啓動本地服務器？此時你的目錄結構應該是

繼續點擊Terminal進入demo04目錄輸入：webpack

 

再執行：webpack-dev-server啓動服務器

打開http://localhost:8080/。此時代碼變更webpack會自動編譯。瀏覽器會自動刷新，是否是有點神奇~

 怎麼到如今沒提到react？別急，咱們繼續往下（http://localhost:8080/能正常打開沒有出錯的狀況下）

2、繼續上面的例子，此次用react和react-dom、babel，要先安裝react和react-dom

demo04根目錄執行

a:cnpm install --save react

b:cnpm install --save react-dom

Babel實際上是一個編譯JavaScript的平臺，他能夠幫你完成如下兩點：

1)：把下一代的javascript標準(es6/7)編譯爲當前瀏覽器徹底支持的javascript

2):使用基於JavaScript進行了拓展的語言，好比React的JSX

Babel實際上是幾個模塊化的包，其核心功能位於稱爲babel-core的npm包中，不過webpack把它們整合在一塊兒使用，可是對於每個你須要的功能或拓展，你都須要安裝單獨的包（用得最多的是解析Es6的babel-preset-es2015包和解析JSX的babel-preset-react包）。

繼續安裝：

c:cnpm install --save-dev babel-core

d:cnpm install --save-dev babel-loader

e:cnpm install --save-dev babel-preset-es2015

f:cnpm install --save-dev babel-preset-react

一、更新webpack.config.js代碼以下

/**
 * Created by Administrator on 2016/11/12
 */
var webpack = require('webpack');
module.exports = {
    //二、進出口文件配置
    entry:__dirname+'/src/entry.js',//指定的入口文件,「__dirname」是node.js中的一個全局變量，它指向當前執行腳本所在的目錄
    output: {//輸出
        path: __dirname+'/public',//輸出路徑
        filename: 'bundle.js'//輸出文件名
    },
    module: {//在配置文件裏添加JSON loader
        loaders: [
            {
                test: /\.json$/,
                loader: "json"
            },
            {//五、編譯es6配置
                test:/\.js$/,
                exclude:/node_modules/,
                loader:'babel',//在webpack的module部分的loaders裏進行配置便可
                query:{
                    presets:['es2015','react']
                }
            },
            {//三、CSS-loader
                test:/\.css$/,
                loader:'style!css'//添加對樣式表的處理
            }

        ]
    },
    //四、服務器依賴包配置
    devServer: {
        contentBase: "./public",//本地服務器所加載的頁面所在的目錄
        colors: true,//終端中輸出結果爲彩色
        historyApiFallback: true,//不跳轉
        inline: true//實時刷新
    }
}

如今你的webpack的配置已經容許你使用ES6以及JSX的語法了

 二、使用es6更新createdom.js，返回一個react組件

/**
 * Created by Administrator on 2016/11/12.
 */
//var message=require('./message.json');
//module.exports = function() {
//    var greet=document.createElement('h1');
//    greet.innerHTML="<span>"+message.name+"</span>"+"<span>"+message.do+"</span>"+"<span>"+message.what+"</span>";
//    return greet;
//};

//五、--------編譯es6配置後跟新greeter.js以下--------------
import React,{Component} from 'react';
import config from './message.json';
class Greeter extends Component{
    render(){
        return(
            <div>
                <h1>
                    <span>{config.name}</span>
                    <span>{config.do}</span>
                    <span>{config.what}</span>
                </h1>
            </div>
        );
    }
}
export default Greeter

三、一樣更新入口文件entry.js，使用react定義和渲染上面的模塊

/**
 * Created by Administrator on 2016/11/12.
 */

//require('./style.css');
//var createdom=require('./createdom.js');
//document.getElementById('app').appendChild(createdom());

//五、編譯es6配置後跟新main.js以下
import React from 'react';
import {render} from 'react-dom';
import Greeter from './createdom';
import './style.css';
render(<Greeter />,document.getElementById('app'));

執行:webpack 一樣會在public下面建立一個bundle.js文件

執行：webpack-dev-server啓動服務器，打開http://localhost:8080/以下

 

 簡單描述瞭如何使用webstorm和react以及webpack的一些簡單配置。

最終若是在產品階段的話，可能還須要對打包的文件進行額外的處理，好比說優化，壓縮，緩存以及分離CSS和JS等等....。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程