文章来源于网络收集而来，版权归原创者所有，如有侵权请及时联系！

客户端项目创建

发布于 2025-02-17 12:51:32 字数 2159 浏览 0 评论 0 收藏 0

第一件事儿我们当然是创建一个新的 NPM 项目，如下：

mkdir voting-client
cd voting-client
npm init            # Just hit enter for each question

我们的应用需要一个 html 主页，我们放在 dist/index.html ：

//dist/index.html

<!DOCTYPE html>
<html>
<body>
  <div id="app"></div>
  <script src="bundle.js"></script>
</body>
</html>

这个页面包含一个 id 为 app 的 <div> ，我们将在其中插入我们的应用。在同级目录下还需要一个 bundle.js 文件。

我们为应用新建第一个 js 文件，它是系统的入口文件。目前我们先简单的添加一行日志代码：

//src/index.js
console.log('I am alive!');

为了给我们客户端开发减负，我们将使用 Webpack ，让我们加入到项目中：

npm install --save-dev webpack webpack-dev-server

接下来，我们在项目根目录新建一个 Webpack 配置文件：

//webpack.config.js

module.exports = {
  entry: [
    './src/index.js'
  ],
  output: {
    path: __dirname + '/dist',
    publicPath: '/',
    filename: 'bundle.js'
  },
  devServer: {
    contentBase: './dist'
  }
};

配置表明将找到我们的 index.js 入口，并编译到 dist/bundle.js 中。同时把 dist 目录当作开发服务器根目录。

你现在可以执行 Webpack 来生成 bundle.js ：

webpack

你也可以开启一个开发服务器，访问 localhost:8080 来测试页面效果：

webpack-dev-server

由于我们将使用 ES6 语法和 React 的 JSX 语法，我们需要一些工具。
Babel 是一个非常合适的选择，我们需要 Babel 库：

npm install --save-dev babel-core babel-loader

我们可以在 Webpack 配置文件中添加一些配置，这样 webpack 将会对 .jsx 和 .js 文件使用 Babel 进行处理：

//webpack.config.js

module.exports = {
    entry: [
        './src/index.js'
    ],
    module: {
        loaders: [{
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel'
        }]
    },
    resolve: {
        extensions: ['', '.js', '.jsx']
    },
    output: {
        path: __dirname + '/dist',
        publicPath: '/',
        filename: 'bundle.js'
    },
    devServer: {
        contentBase: './dist'
    }
};

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

列表为空，暂无数据

客户端项目创建

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。