成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

React + webpack 環(huán)境配置

hellowoody / 3265人閱讀

安裝配置Babel

babel-preset-es2015 ES6語(yǔ)法包，使代碼可以隨意地使用ES6的新特性。

babel-preset-react React語(yǔ)法包，專(zhuān)門(mén)用于React的優(yōu)化，在代碼中可以使用React ES6 classes的寫(xiě)法，同時(shí)直接支持JSX語(yǔ)法格式

安裝Babel loader

// 安裝babel-core核心模塊和babel-loader
npm install babel-core babel-loader --save-dev


// 安裝ES6 和 React 支持
npm install babel-preset-es2015 babel-preset-react --save-dev

配置 .babelrc

安裝完Babel和它的插件，配置一下它的規(guī)則，在根目錄下新建一個(gè).babelrc空文件：

// 告訴Babel，編譯JavaScript代碼的時(shí)候要用這兩個(gè)presets編譯
 {
   "preset": ["es2015", "react”]
 }
安裝配置ESLint

安裝ESLint loader

為webpack添加這個(gè)preLoaders（在loader處理資源之前，先用preLoaders進(jìn)行處理，代碼檢查在代碼轉(zhuǎn)換之前進(jìn)行）

npm install eslint eslint-loader --save-dev

這里使用Airbnb開(kāi)發(fā)配置合集eslint-config-airbnb，這個(gè)配置合集里面還包括以下3個(gè)插件：

npm install eslint-plugin-import eslint-plugin-react eslint-plugin-jsx-a11y --save-dev

npm install eslint-config-eslint

配置 .eslintrc

在根目錄下新建一個(gè).eslintrc的空文件：

{
   "extends": "airbnb",
   "rules": {
     "comma-dangle": ["error", "never"]
   }
 }
安裝配置webpack

配置webpack之前，先安裝一個(gè)webpack的插件——html-webpack-plugin，它可以幫助我們自動(dòng)生成HTML頁(yè)面，并且引入正確的JavaScript文件依賴(lài)：

npm install html-webpack-plugin —save-dev

在項(xiàng)根目錄下新建一個(gè)webpack.config.js文件:

let path = require("path") 
let webpack = require("webpack")
let HtmlwebpackPlugin = require("html-webpack-plugin")
// 一些常用路徑
const ROOT_PATH = path.resolve(__dirname)
const APP_PATH = path.resolve(ROOT_PATH, "app")
const BUILD_PATH = path.resolve(ROOT_PATH, "build")

module.exports = {
  entry: {
    app: path.resolve(APP_PATH, "index.jsx")
  },
  output: {
    path: BUILD_PATH,
    filename: "bundle.js"
  },
  // 開(kāi)啟 dev source map
  devtool: "eval-source-map",
  // 開(kāi)啟 webpack dev server
  devServer: {
    historyApiFallback: true,
    hot: true,
    inline: true,
    progress: true
  },

  modules: {
    // 配置preLoaders, 將eslint 添加進(jìn)去
    preLoaders: [
      {
        test: /.jsx?$/,
        loaders: ["eslint"],
        include: APP_PATH
      }
    ],
    
    // 配置loader，將Babel添加進(jìn)去
    loaders: [
      {
        test: /.jsx?$/,
        loaders: ["babel"],
        include: APP_PATH
      }
    ]
  },

  // 配置 plugin
  plugins: [
    new HtmlwebpackPlugin({
      title: "my first react webpack"
    })
  ],
  resolve: {
    extensions: ["", ".js", ".jsx"]
    // 在js中import加載jsx擴(kuò)展名的腳本
  }
}
添加組件熱加載（HMR）功能 
npm install babel-preset-react-hrme --save-dev

這個(gè)preset里面其實(shí)包括兩方面：

react-transform-hmr用來(lái)實(shí)現(xiàn)熱加載

react-transform-catch-errors用來(lái)捕獲render里面的方法，并且直接展示在界面上

配置一下 .babelrc：

{
  "preset": ["es2015", "react"],
  "env": {
    "development": {
      "presets": ["react-hrme"]
    }
  }
}

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/88406.html

相關(guān)文章

  • React系列---Webpack環(huán)境搭建（二）不同環(huán)境不同配置

    摘要：系列環(huán)境搭建一手動(dòng)搭建系列環(huán)境搭建二不同環(huán)境不同配置系列環(huán)境搭建三打包性能優(yōu)化實(shí)際項(xiàng)目中，往往不同環(huán)境有不同的構(gòu)建需求。 React系列---Webpack環(huán)境搭建（一）手動(dòng)搭建React系列---Webpack環(huán)境搭建（二）不同環(huán)境不同配置React系列---Webpack環(huán)境搭建（三）打包性能優(yōu)化 實(shí)際項(xiàng)目中，往往不同環(huán)境有不同的構(gòu)建需求。比如開(kāi)發(fā)、測(cè)試和生產(chǎn)環(huán)境對(duì)應(yīng)的后端接口地...

    coordinate35 評(píng)論0 收藏0

  • React項(xiàng)目實(shí)戰(zhàn)：環(huán)境搭建

    摘要：官方文檔中文翻譯構(gòu)建用戶(hù)界面的庫(kù)。官方文檔建議學(xué)習(xí)時(shí)以官方文檔為準(zhǔn)，中文翻譯或者第三方作者的教程可以幫助你理清思路會(huì)用到的重要知識(shí)點(diǎn)我也會(huì)進(jìn)行簡(jiǎn)明的解釋?zhuān)缬龅藉e(cuò)誤或者不理解的內(nèi)容，歡迎實(shí)時(shí)指出。 前言 前面提到前端大統(tǒng)一的概念，如果感興趣，歡迎說(shuō)說(shuō)自己的看法，點(diǎn)擊前往。Web前端框架層出不窮，不可能面面俱到，這里給個(gè)小建議： 如果對(duì)Weex App感興趣，應(yīng)該選擇vue框架； 如果...

    cnio 評(píng)論0 收藏0

  • React項(xiàng)目實(shí)戰(zhàn)：環(huán)境搭建

    摘要：官方文檔中文翻譯構(gòu)建用戶(hù)界面的庫(kù)。官方文檔建議學(xué)習(xí)時(shí)以官方文檔為準(zhǔn)，中文翻譯或者第三方作者的教程可以幫助你理清思路會(huì)用到的重要知識(shí)點(diǎn)我也會(huì)進(jìn)行簡(jiǎn)明的解釋?zhuān)缬龅藉e(cuò)誤或者不理解的內(nèi)容，歡迎實(shí)時(shí)指出。 前言 前面提到前端大統(tǒng)一的概念，如果感興趣，歡迎說(shuō)說(shuō)自己的看法，點(diǎn)擊前往。Web前端框架層出不窮，不可能面面俱到，這里給個(gè)小建議： 如果對(duì)Weex App感興趣，應(yīng)該選擇vue框架； 如果...

    GHOST_349178 評(píng)論0 收藏0

  • 最小白的webpack+react環(huán)境搭建

    摘要：接下來(lái)安裝和，執(zhí)行命令安裝很順利，沒(méi)有遇到任何問(wèn)題。再總結(jié)一下我們遇到的坑初始化時(shí)的項(xiàng)目名稱(chēng)要合規(guī)，特別是不能出現(xiàn)中劃線下劃線。另外再增加，這樣刷新的速度會(huì)大大加快最終的文件目錄結(jié)構(gòu)為各文件的最終內(nèi)容本文也同步發(fā)表在我的公眾號(hào)“我的天空” 從零開(kāi)始，用最少的配置、最少的代碼、最少的依賴(lài)來(lái)搭建一個(gè)最簡(jiǎn)單的webpack+react環(huán)境。 最近在玩webpack+rea...

    番茄西紅柿 評(píng)論0 收藏0

  • React系列---Webpack環(huán)境搭建（三）打包性能優(yōu)化

    摘要：的選項(xiàng)中，是文件的輸出路徑是暴露的對(duì)象名，要跟保持一致是解析包路徑的上下文，這個(gè)要跟下面要配置的保持一致。最后修改一下模板，增加引用文件給入口文件再加點(diǎn)依賴(lài)模塊，方便打包觀察運(yùn)行打包可以看到，入口文件里依賴(lài)的，模塊，直接引用了。 React系列---Webpack環(huán)境搭建（一）手動(dòng)搭建React系列---Webpack環(huán)境搭建（二）不同環(huán)境不同配置React系列---Webpack環(huán)境...

    Jason_Geng 評(píng)論0 收藏0

  • 構(gòu)建React開(kāi)發(fā)環(huán)境

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

    yck 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<