mobx 管理应用程序的状态
mobx实例
一、 新建应用 mobx-test，简单配置webpack
- 控制台，创建应用文件夹
mkidr mobx-test
cd mobx-test
- 控制台，新建src源文件，及index.js源文件
mkdir src
touch src/index.js
- 打开空的index.js文件，输入
document.write('hello world");
- 控制台，创建应用的配置文件 package.json
npm init -y
npm init命令会在当前目录生成一个package.json文件，这个文件中会记录一些关于项目的信息。执行该命令后终端会询问比如：项目的作者，git地址，入口文件、命令设置、项目名称和版本号等等
。而如果想要偷懒步免去一直按 enter，在命令后追加 --yes 参数即可，其作用与一路下一步相同。npm init --yes简写，npm init -y
- 控制台，创建webpack的配置文件
在当前目录新建webpack.config.js文件
touch webpack.config.js
- 安装应用 依赖
把新的js语法编译成当前的浏览器能够识别的语法格式，安装baberl依赖。
npm i webpack webpack-cli babel-core babel-preset-env babel-loader -D
--save-dev 、 -D意思是将模块版本信息保存到devDependencies（开发环境依赖）中，即package.json文件的devDependencies字段中；
- 编写
webpack.config.js内容
const path = require('path');
const config = {
mode: 'development',
entry: path.resolve(__dirname, 'src/index.js'),
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'main.js'
},
module: {
rules: [{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['env'],
}
}
}]
},
devtool: 'inline-source-map'
};
module.exports = config;
- 为了方便调用webpack，编写
npm script命令
package.json文件中添加start
-w表示js文件更改，自动进行编译
"scripts": {
"start": "webpack -w",
"test": "echo \"Error: no test specified\" && exit 1"
},
- 控制台，运行
npm start
- 在根目录下新建index.html文件
引用编译后的文件
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript" src="dist/main.js"></script>
</body>
</html>
以上就是简单的使用webpack基本项目。
二、 结合mobx和react
- 控制台，安装react 依赖
npm i react react-dom prop-types mobx-react -S
--save、-S参数意思是把模块的版本信息保存到dependencies（生产环境依赖）中，即package.json文件的dependencies字段中
-
修改src/index.js文件的后缀名为
.jsx -
修改webpack配置
webpack.config.js中修改入口文件entry、和使用babel文件test
....
entry: path.resolve(__dirname, 'src/index.jsx'),
....
module: {
rules: [{
test: /\.jsx$/,
...
}]
},
};