創建項目
創建一個目錄，使用npm快速初始化
$ mkdir my-project && npm init -y
安裝依賴
安裝webpack以及babel
$ 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
$ npm install --save nervjs
添加配置文件
在項目根目錄下添加一個簡單的webpack配置文件webpack.config.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
rules: [
{ test: /\.js$/, use: 'babel-loader' }
]
},
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: './index.html'
})
]
}
在項目根目錄下添加一個babel的配置文件.babelrc
{
"presets": [
[
"@babel/env",
{
"spec": true,
"useBuiltIns": false
}
]
],
"plugins": [
[
"@babel/plugin-transform-react-jsx",
{
"pragma": "Nerv.createElement"
}
]
]
}
添加項目入口文件
在項目根目錄下添加一個入口html文件index.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Nerv App</title> </head> <body> <div id="app"></div> </body> </html>
書寫代碼
然后就可以書寫代碼了，新建一個src目錄，添加一個Hello.js文件
import Nerv from 'nervjs'
// import { Component, createElement } from 'nervjs'
class Hello extends Nerv.Component {
constructor () {
super(...arguments)
this.state = {
message: 'world'
}
}
render () {
return (
<div>
Hello, {this.state.message}
</div>
)
}
}
export default Hello
隨后在src目錄下新建一個index.js文件來調用Hello.js
import Nerv from 'nervjs'
import Hello from './Hello'
Nerv.render(<Hello />, document.getElementById('app'))
最后在package.json文件的scripts字段中增加
"scripts": {
"dev": "webpack-dev-server --config webpack.config.js"
},
在項目根目錄下執行npm run dev，就能在瀏覽器中看到效果了！
注意：使用的時候需要配合babel的@babel/plugin-transform-react-jsx插件來將JSX轉換的創建虛擬DOM的代碼替換成使用Nerv的API，使用方式如下
{
...
"plugins": [
["@babel/plugin-transform-react-jsx", {
"pragma": "Nerv.createElement" // 如果你 import { createElement } from 'nervjs' 的話，那這里設置成 `createElement` 就行了
}]
]
}
當然，如果你想避免從0開始進行webpack與babel配置，你可以使用Athena2來進行開發
Athena2是一款基於webpack的前端工程化開發工具，它可以快速初始化一個新項目，內置項目所需的配置，對於普通需求基本可以零配置開發使用，當然你也可以自由地提供自己所需要的webpack配置。
相關使用請查看Athena2的使用文檔