国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

react基于webpack和Babel 6上的開發(fā)環(huán)境搭建

callmewhy / 1671人閱讀

摘要:可能在項目正式上線的時候才需要發(fā)布配置單文件入口版本新建一個和開發(fā)環(huán)境不同的是,入口和出口。相應的在的源也要進行修改。加載模塊發(fā)布配置多文件模式庫最好就不要打包進來。因為一般庫都是不會改動的。所以這里就要進行庫的分離。

react-js開發(fā)環(huán)境

時間:2016.3.19-12:29
作者:三月懶驢
基于:react版本:0.14
基于:babel版本:6
相關代碼:github

開始一個項目
npm init
安裝webpack
npm install webpack --save-dev
項目目錄(demo架構)
    - /app
        - main.js
        - component.js
    - /build
        - bundle.js (自動生成)
        - index.html
    - webpack.config.js
    - package.json
設置webpack.config.js
var path = require("path");
module.exports = {
    entry:path.resolve(__dirname,"app/main.js"),
    output:{
        path:path.resolve(__dirname,"build"),
        filename:"bundle.js"
    }
};

在package.json里面預設這個命令去啟動打包功能

"build":"webpack"
課間練習
//component.js
"use strict"
module.exports = function(){
    var a = "hello word"
    return a;
}
//main.js
"use strict"
var component = require("./component.js");
document.body.innnerHTML = component();
使用webpack-dev-server:監(jiān)聽代碼自動刷新!
npm install webpack-dev-server --save-dev

在package.json里面配置webpack-dev-server

"dev":"webpack-dev-server --devtool eval --progress --colors --hot --content-base build"
//webpack-dev-server 創(chuàng)建一個服務器8080端口的
//devtool eval --為你的代碼創(chuàng)建源地址,可以代碼快速定位
//progress --顯示進度條
//colors --命令行帶顏色
//content-base build --指向設置的輸出目錄
//一旦啟動這個就會用服務器去監(jiān)聽代碼文件的變化,從而每次變化都自動合并

啟動自動刷新功能

//配置在webpack.config.js的入口
entry:[
    "webpack/hot/dev-server",
    "webpack-dev-server/client?http://localhost:8080",
    path.resolve(__dirname,"app/main.js");
]
課堂練習
1. npm run dev 啟動服務器
2. 打開瀏覽器->http://localhost:8080
3. 修改一下前面的課堂練習時候寫的代碼中的compnent.js的return的東西
配置react / babel
//安裝react
npm install react --save
npm install react-dom --save
//安裝babel-loader
npm install babel-loader --save-dev
npm install babel-core --save-dev
npm install babel-preset-es2015 --save-dev  //支持ES2015
npm install babel-preset-react --save-dev //支持jsx
npm install babel-preset-stage-0 --save-dev //支持ES7
//但是還不夠
npm install babel-polyfill --save
/*
Polyfilla是一個英國產品,在美國稱之為Spackling Paste(譯者注:刮墻的,在中國稱為膩子).記住這一點就行:把舊的瀏覽器想象成為一面有了裂縫的墻.這些[polyfills]會幫助我們把這面墻的裂縫抹平,還我們一個更好的光滑的墻壁(瀏覽器)
*/
npm install babel-runtime  --save
npm install babel-plugin-transform-runtime --save-dev
/*減少打包的時候重復代碼,以上要注意是放在dev還是非dev上!*/

配置babel

//在入口添加polyfill
entry[
    "babel-polyfill",
    "webpack/hot/dev-server",
    "webpack-dev-server/client?http://localhost:8080",
    path.resolve(__dirname,"app/main.js")
]
//在webpack.config.js的module.exports = {}里面增加
module:{
    loaders:[{
        "loader":"babel-loader",
        exclude:[
            //在node_modules的文件不被babel理會
            path.resolve(__dirname,"node_modules"),
        ],
        include:[
            //指定app這個文件里面的采用babel
            path.resolve(__dirname,"app"),
        ],
        test:/.jsx?$/,
        query:{
            plugins:["transform-runtime"],
            presets:["es2015","stage-0","react"]
        }
    }]
}
課堂測試
//component.js
"use strict"
import React from "react"
class Component extends React.Component{
    render(){
        return 
Helllo World
} }
//main.js
"use strict"
//注意!這里引入了新的東西
import "babel-polyfill"
import React from "react"
import {render} from "react-dom"
import Component from "./component"
let main = function(){
    render(,document.getElementById("main"));
}
main();
加入CSS / iamge / font
// 這里先留個坑!因為暫時來說還是認為外鏈出來適合現(xiàn)在這個時代??赡茉陧椖空缴暇€的時候才需要
發(fā)布配置:單文件入口版本!
//新建一個webpack.production.config.js
//in package.json
"deploy": "NODE_ENV=production webpack -p --config webpack.production.config.js"
//in webpack.production.config.js
//和開發(fā)環(huán)境不同的是,入口和出口。相應的在HTML的JS源也要進行修改。
var path = require("path")
var node_module_dir = path.resolve(__dirname,"node_module");
module.exports = {
    entry:[
        "babel-polyfill",
        path.resolve(__dirname,"app/main.js"),
    ],
    output:{
        path:path.resolve(__dirname,"build"),
        filename:"app.js"
    },
    module:{
        loaders:[
            {
                loader:"babel-loader",   //加載babel模塊
                include:[
                    path.resolve(__dirname,"app"),
                ],
                exclude:[
                    node_module_dir
                ],
                test:/.jsx?$/,
                query:{
                    plugins:["transform-runtime"],
                    presets:["es2015","stage-0","react"]
                }
            },
        ]
    }
}
發(fā)布配置(多文件模式)

庫最好就不要打包進來。因為一般庫都是不會改動的。所有用戶load一次就好了。所以這里就要進行庫的分離。
依舊是:webpack.production.config.js

var path = require("path");
var webpack = require("webpack");
var node_module_dir = path.resolve(__dirname,"node_module");

module.exports = {
    entry:{
        app:[path.resolve(__dirname,"app/main.js"),],
        react: ["babel-polyfill","react","react-dom"]
    },
    output:{
        path:path.resolve(__dirname,"build"),
        filename:"app.js"
    },
    module:{
        loaders:[
            {
                loader:"babel-loader",   //加載babel模塊
                include:[
                    path.resolve(__dirname,"app"),
                ],
                exclude:[
                    node_module_dir
                ],
                test:/.jsx?$/,
                query:{
                    plugins:["transform-runtime"],
                    presets:["es2015","stage-0","react"]
                }
            },
        ]
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin("react", "react.js")
      ]
}

預計學習搭建時間:1小時!
恭喜你!全部課程完成,接下來的話,我們就要開始react的課程了!本課程如果還有什么不懂的話,可以在評論中進行討論。

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/79093.html

相關文章

  • 構建React開發(fā)環(huán)境

    摘要:使用包管理工具,基于構建工具,搭建開發(fā)環(huán)境由于一些軟件安裝跟系統(tǒng)環(huán)境相關,故這里查看本文檔,需要根據(jù)自己的系統(tǒng)環(huán)境,選擇相對應的系統(tǒng)版本。 使用Yarn包管理工具,基于Webpack構建工具,搭建React開發(fā)環(huán)境 showImg(https://segmentfault.com/img/remote/1460000019833533?w=560&h=310); 由于一些軟件安裝跟系統(tǒng)...

    yck 評論0 收藏0
  • Webpack系列——手把手教你使用Webpack搭建簡易的React開發(fā)環(huán)境

    摘要:在這篇文章中我們開始利用我們之前所學搭建一個簡易的開發(fā)環(huán)境,用以鞏固我們之前學習的知識。 文章首發(fā)于我的github及個人博客,github請看https://github.com/huruji/blo...,轉載請注明出處。 在這篇文章中我們開始利用我們之前所學搭建一個簡易的React開發(fā)環(huán)境,用以鞏固我們之前學習的Webpack知識。首先我們需要明確這次開發(fā)環(huán)境需要達到的效果:1、...

    cucumber 評論0 收藏0
  • 手挽手帶你學React:一檔 React環(huán)境搭建,語法規(guī)則,基礎使用

    摘要:當屬性是一個回調函數(shù)時,函數(shù)接收底層元素或類實例取決于元素的類型作為參數(shù)。 手挽手帶你學React入門第一期,帶你熟悉React的語法規(guī)則,消除對JSX的恐懼感,由于現(xiàn)在開發(fā)中都是使用ES6語法開發(fā)React,所以這次也使用ES6的模式進行教學,如果大家對ES6不熟悉的話,先去看看class相關內容吧,這里我也慢慢帶大家一步一步學會React。 視頻教程 視頻教程可移步我的個人博客:h...

    BicycleWarrior 評論0 收藏0
  • 【單頁面博客從前端到后端】環(huán)境搭建

    摘要:的配置其中就不多說會解決更改組件的時熱更新直接刷新頁面的問題。 工欲善其事,必先利其器。單頁面應用的開發(fā)和生產環(huán)境涉及文件的編譯、壓縮、打包、合并等,目前前端最流行的莫過于 webpack 。為了深入了解 webpack 以及其相關插件,我們決定不采用腳手架,自己來搭建基于 webpack 的開發(fā)和生產環(huán)境。 基礎環(huán)境 nodejs的安裝: 移步官網 建議使用nvm來管理nodejs...

    wizChen 評論0 收藏0
  • React項目實戰(zhàn):環(huán)境搭建

    摘要:官方文檔中文翻譯構建用戶界面的庫。官方文檔建議學習時以官方文檔為準,中文翻譯或者第三方作者的教程可以幫助你理清思路會用到的重要知識點我也會進行簡明的解釋,如遇到錯誤或者不理解的內容,歡迎實時指出。 前言 前面提到前端大統(tǒng)一的概念,如果感興趣,歡迎說說自己的看法,點擊前往。Web前端框架層出不窮,不可能面面俱到,這里給個小建議: 如果對Weex App感興趣,應該選擇vue框架; 如果...

    cnio 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<