Javascript 在开发React应用程序时编译/传输代码

我正在React中开发一个应用程序

到目前为止，我刚刚包括

<script src='//unpkg.com/react@15/dist/react.min.js'>
<script src='//unpkg.com/react-dom@15/dist/react-dom.min.js'>
<script src='//unpkg.com/babel-standalone@6/babel.min.js'>

因为自从巴贝尔实时编译之后，所有的东西都被加载了，也不需要编译任何东西

然而，当我想要包含安装了npm的第三方库时，似乎我必须使用导入。例如，如果我使用

npm install react dates安装
react dates
，请保存
，并将其包含在

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

我得到了错误

Uncaught ReferenceError: require is not defined

我猜这是因为我不使用RequireJS、Webpack、Gulp或任何东西

在开发过程中能够包含组件的首选方式是什么，这样我就不必每次做一个小改动就编译代码了？
您可以使用
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
将在监视模式下启动，您无需反复重新编译代码

或者您可以在开发模式下运行
npm start
以使用
webpack dev server

查看如何设置webpack
我想在原型制作过程中，您也可以继续使用unpkg作为反应日期。与通过
npm
安装不同，只需像您为react&co所做的那样，添加更多
script
标记。此处的更多信息：我发现，但它有许多
require
语句，在浏览器中似乎不起作用特定模块不会在npm上发布浏览器模块（您需要的版本），因此unpkg将向您发送主模块。您可以找到具有可用浏览器捆绑包的替代模块，也可以设置本地捆绑程序（Webpack/RollUp/etc.）。或者您可以使用create react app为您完成所有设置，然后添加模块。
"scripts": {
    "start": "webpack-dev-server --content-base src",
    "build": "webpack --watch"

  }