Question

我在网上看到一个非常简单的反应应用程序代码：

index.html：

<!doctype html>
<html>
<head>
    ...
</head>
<body>
    <div id="root"></div>
</body>
</html>

然后index.jsx：

import "babel-polyfill";

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
    <App />,
    document.getElementById('root')
);

但如果index.jsx中没有脚本标记，index.html javascript文件如何运行？类似的东西：<script type="text/babel" src="./index.jsx">？

Answer 1

扩展我的评论，这是您可能使用的webpack配置的示例。这将在index.html文件夹中自动生成dist文件，其中嵌入了index_bundle.js。 HtmlWebpackPlugin有你可以传递的选项，但正如我所说，这是一个基本的例子。

<强> webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const webpackConfig = {
  entry: 'index.jsx',
  output: {
    path: 'dist',
    filename: 'index_bundle.js'
  },
  module: {
    loaders: {
      test: /.jsx?$/,
      loader: ['babel-loader'],
      exclude: path.join(__dirname, 'node_modules'),
    }
  }, 
  plugins: [new HtmlWebpackPlugin()]
};

您需要的套餐： npm install --save-dev webpack babel-loader html-webpack-plugin

使用run webpack。

修改

您还需要一个.babelrc文件。基本示例：

{ "presets": { "es5" } }

你必须在你的HTML中的脚本标签中包含.jsx吗？

1 个答案: