快速开始

开始一个全新的项目

最简单开始使用 Nerv 的方法就是在 CodeSandbox 中实时编辑代码。但推荐使用webpack配合babel来进行开发

创建项目

创建一个目录，使用npm快速初始化

  1. $ mkdir my-project && npm init -y

安装依赖

安装webpack以及babel

  1. $ npm install --save-dev webpack webpack-dev-server html-webpack-plugin babel-loader@8.0.0-beta.0 @babel/core @babel/preset-env @babel/plugin-transform-react-jsx

安装Nerv

  1. $ npm install --save nervjs

添加配置文件

在项目根目录下添加一个简单的webpack配置文件webpack.config.js

  1. const path = require('path')
  2. const HtmlWebpackPlugin = require('html-webpack-plugin')
  4. module.exports = {
  5.   entry: './src/index.js',
  6.   output: {
  7.     path: path.resolve(__dirname, 'dist'),
  8.     filename: 'bundle.js'
  9.   },
  10.   module: {
  11.     rules: [
  12.       { test: /\.js$/, use: 'babel-loader' }
  13.     ]
  14.   },
  15.   plugins: [
  16.     new HtmlWebpackPlugin({
  17.       filename: 'index.html',
  18.       template: './index.html'
  19.     })
  20.   ]
  21. }

在项目根目录下添加一个babel的配置文件.babelrc

  1. {
  2.   "presets": [
  3.     [
  4.       "@babel/env",
  5.       {
  6.         "spec": true,
  7.         "useBuiltIns": false
  8.       }
  9.     ]
  10.   ],
  11.   "plugins": [
  12.     [
  13.       "@babel/plugin-transform-react-jsx",
  14.       {
  15.         "pragma": "Nerv.createElement"
  16.       }
  17.     ]
  18.   ]
  19. }

添加项目入口文件

在项目根目录下添加一个入口html文件index.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Nerv App</title>
  6. </head>
  7. <body>
  8.   <div id="app"></div>
  9. </body>
  10. </html>

书写代码

然后就可以书写代码了，新建一个src目录，添加一个Hello.js文件

  1. import Nerv from 'nervjs'
  2. // import { Component, createElement } from 'nervjs'
  4. class Hello extends Nerv.Component {
  5.   constructor () {
  6.     super(...arguments)
  7.     this.state = {
  8.       message: 'world'
  9.     }
  10.   }
  12.   render () {
  13.     return (
  14.       <div>
  15.         Hello, {this.state.message}
  16.       </div>
  17.     )
  18.   }
  19. }
  21. export default Hello

随后在src目录下新建一个index.js文件来调用Hello.js

  1. import Nerv from 'nervjs'
  2. import Hello from './Hello'
  4. Nerv.render(<Hello />, document.getElementById('app'))

最后在package.json文件的scripts字段中增加

  1. "scripts": {
  2.   "dev": "webpack-dev-server --config webpack.config.js"
  3. }

在项目根目录下执行npm run dev，就能在浏览器中看到效果了！

快速开始 - 图1

注意：使用的时候需要配合babel的@babel/plugin-transform-react-jsx插件来将JSX转换的创建虚拟DOM的代码替换成使用Nerv的API，使用方式如下

  1. {
  2.   ...
  3.   "plugins": [
  4.     ["@babel/plugin-transform-react-jsx", {
  5.       "pragma": "Nerv.createElement" // 如果你 import { createElement } from 'nervjs' 的话，那这里设置成 `createElement` 就行了
  6.     }]
  7.   ]
  8. }

当然，如果你想避免从0开始进行webpack与babel配置，你可以使用Athena2来进行开发

Athena2是一款基于webpack的前端工程化开发工具，它可以快速初始化一个新项目，内置项目所需的配置，对于普通需求基本可以零配置开发使用，当然你也可以自由地提供自己所需要的webpack配置。

相关使用请查看Athena2的使用文档

原文: https://nervjs.github.io/docs/intro/getting-started.html