比如一个极简的todoList
选择一个好的根目录
初始化包
- 敲入初始化命令:
npm init
, 输入一些关于包的信息 - 在根目录下得到包文件
package.json
你的package.json
也许是这样
{
"name": "todos",
"version": "1.0.0",
"description": "a tiny todos list App.",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Heskey Baozi",
"license": "MIT"
}
加载依赖项
React.JS - "A JavaScript library for building user interfaces"
- React:
npm install react --save
- ReactDOM:
npm install react-dom --save
或者连在一起写: npm install react react-dom --save
Babel - "Use next generation JavaScript, today.
- Babel:
npm install babel --save
Webpack - "A module bundler"
- Webpack:
npm install webpack --save-dev
加载完这些后
你的package.json
也许是这样
{
"name": "todos",
"version": "1.0.0",
"description": "a tiny todos list App.",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Heskey Baozi",
"license": "MIT",
"dependencies": {
"babel": "^6.5.2",
"react": "^15.1.0",
"react-dom": "^15.1.0"
},
"devDependencies": {
"webpack": "^1.13.1"
}
}
支持JSX和ES6语法
- babel-loader:
npm install babel-loader --save-dev
- babel-loader需要的参数:
npm install babel-preset-es2015 babel-preset-react --save-dev