Question

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

直到现在我刚刚加入

define('FS_METHOD', 'direct');
define('FTP_BASE', '/home1/wad4gc0acmry/public_html/my-site.example.com/wordpress/');
define('FTP_CONTENT_DIR', '/home1/wad4gc0acmry/public_html/my-site.example.com/wordpress/wp-content/');
define('FTP_PLUGIN_DIR ', '/home1/wad4gc0acmry/public_html/my-site.example.com/wordpress/wp-content/plugins/');
// define('FTP_PUBKEY', '/home1/username/.ssh/id_rsa.pub');
// define('FTP_PRIKEY', '/home1/username/.ssh/id_rsa');
define('FTP_USER', 'my-ftp-username');
define('FTP_PASS', 'my-ftp-password');
define('FTP_HOST', 'ftp.my-site.example.com');
// define('FTP_SSL', false);

然后我不必使用

<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'>

因为所有内容都已加载，因为babel实时编译它所以不需要编译任何东西。

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

中

npm-install react-dates --save

我收到错误

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

我猜是因为我不使用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。

了解如何设置网络包 here

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

1 个答案: