開發React應用程序時編譯/轉碼代碼

直到現在我剛纔包括

<script src='//unpkg.com/[email protected]/dist/react.min.js'> 
<script src='//unpkg.com/[email protected]/dist/react-dom.min.js'> 
<script src='//unpkg.com/[email protected]/babel.min.js'>

，然後我既沒有使用

import React from 'react'; 
import ReactDOM from 'react-dom';

因爲一切都被裝也沒有因爲巴別塔實時編譯它編譯任何東西。

但是，當我想包含與npm安裝的第三方庫時，似乎我必須使用導入。舉例來說，如果我安裝react-dates與npm-install react-dates --save，並希望與

import { DateRangePicker, SingleDatePicker, DayPickerRangeController } from 'react-dates';

把它列入我的錯誤

Uncaught ReferenceError: require is not defined

我想這是因爲我不使用RequireJS，的WebPack，咕嘟咕嘟或任何東西。

在開發過程中能夠包含組件的首選方式是什麼，所以我不必每次編譯我的代碼就做了一些小改動？

來源

2017-05-13 Jamgreen

我想你可以使用unpkg的反應，日期以及同時進行的原型。不用通過'npm'安裝，只需要像爲react＆co一樣包含更多'腳本'標籤。更多信息在這裏：https://unpkg.com/#/ – MarcoL

我找到了https://unpkg.com/[email protected]，但它有很多'require'語句似乎不工作在瀏覽器中 – Jamgreen

該特定模塊不會在npm上發佈瀏覽器模塊（您需要的版本），因此unpkg會向您發送主模塊。你可以找到一個可用的瀏覽器軟件包的模塊，或者你設置一個本地打包器（Webpack/RollUp /等等）。 – MarcoL

您可以使用webpack來配置你的代碼，並在watch模式下運行或開發所以在使用 webpack-dev-server，這將讓你自動編譯你的代碼做一個小的變化

你webpack.config.js應隨時看起來像

var debug=process.env.NODE_ENV !== "production"; 
var path=require("path"); 
var webpack=require("webpack"); 

module.exports = { 
    context: path.join(__dirname, "src"), 
    devtool: debug ? "inline-sourcemap" : null, 
    entry: "./js/index.js", 
    module: { 
     rules: [{ 
      test: /\.jsx?$/, 
      exclude: [/node_modules/], 
      use: [{ 
       loader: "babel-loader", 
       options: {presets: ["stage-0","es2015","react"]} 
      }] 

     }] 
    }, 
    output: { 
     path: __dirname + "/src", 
     filename: "bundle.js" 
    }, 
    plugins: debug? [] : [ 
     new webpack.optimize.DedupePlugin(), 
     new webpack.optimize.OccurenceOrderPlugin(), 
     new webpack.optimize.UglifyJsPlugin({mangle: false, sourcemap: false}) 
    ] 
}

而在你的package.json，你可以定義腳本

"scripts": { 
    "start": "webpack-dev-server --content-base src", 
    "build": "webpack --watch" 

    }

如果您運行npm run build命令webpack將以監視模式啓動，您將不需要重新編譯您的代碼。

或者您可以在開發模式下使用webpack-dev-server運行npm start。

瞭解如何設置的WebPack here

來源

2017-05-13 07:34:33

開發React應用程序時編譯/轉碼代碼

回答

相關問題