javascript - 开发 React 应用程序时编译/转换代码

Question

我正在 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'>

然后我都不必使用

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

因为所有内容都已加载，也不必编译任何内容，因为 babel 是实时编译的。

但是，当我想包含使用 npm 安装的第三方库时，似乎我必须使用 import。例如，如果我使用 npm-install react-dates --save 安装 react-dates 并希望将其包含在

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

我收到错误

Uncaught ReferenceError: require is not defined

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

在开发时能够包含组件的首选方式是什么，这样我就不必每次进行小更改时都编译代码？

Answer 1

您可以使用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 here