1.建立thinkjs项目
- thinkjs new think-demo //建立 thinkjs 项目
- npm install //安装需要的依赖
- npm start //启动thinkjs 项目
2.安装react 和reactDOM
- npm install react react-dom --save-dev
3.安装 ant design
- npm install antd --save-dev
4.安装webpack
- npm install webpack -g
//全局安装webpack - npm install webpack --save-dev
//项目环境下安装webpack - 建立 webpack.config.js 文件
var path = require('path');
var webpack = require('webpack');
module.exports = {
// entry 入口文件
entry: './www/static/src/App.jsx',
// output 编译后的js输出目录及名称
output: {
path: path.join(__dirname, '/www/static/js/'),
filename: 'bundle.js'
},
plugins: [
],
//resolve 指定可以被 import 的文件后缀。
//比如 Hello.jsx 这样的文件就可以直接用 import Hello from 'Hello' 引用。
resolve: {
extensions: ['', '.js', '.jsx']
},
module: {
//loaders 指定 babel编译后缀名为 .js 或者 .jsx 的文件，
//这样你就可以在这两种类型的文件中自由使用 JSX 和 ES6 了。
loaders: [
{
test: /\.jsx?$/,
loader: 'babel',
cacheDirectory: false,
// query 指定babel的一些插件等
query: {
presets: ['react', 'es2015-loose', 'stage-0'],
plugins: ['transform-runtime']
},
exclude: /node_modules/
},
]
}
}
5.文件配置
（1）配置html文件
//修改index_index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My App</title>
</head>
<body>
<div id="content"></div>
<script type="text/javascript" src="/static/js/bundle.js"></script></body>
</html>
6.App.jsx
（1）在 www.static.src目录下建立并修改App.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import { DatePicker, message } from 'antd';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
date: '',
};
}
handleChange(date) {
message.info('您选择的日期是: ' + date.toString());
this.setState({ date });
}
render() {
return (
<div style={{ width: 400, margin: '100px auto' }}>
<DatePicker onChange={value => this.handleChange(value)} />
<div style={{ marginTop: 20 }}>当前日期：{this.state.date.toString()}</div>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('content'));
7.运行
webpack
npm start
8.错误并修改
（1）
Invalid configuration object. Webpack has been initialised using a configuration
object that does not match the API schema.
- configuration.module.loaders[0] has an unknown property 'cacheDirectory'. The
se properties are valid:
object { enforce?, exclude?, include?, issuer?, loader?, loaders?, oneOf?, op
tions?, parser?, query?, resource?, resourceQuery?, compiler?, rules?, test?, us
e? }
- configuration.resolve.extensions[0] should not be empty.
修改：删除：cacheDirectory 属性
（2）
Invalid configuration object. Webpack has been initialised using a configuration
object that does not match the API schema.
- configuration.resolve.extensions[0] should not be empty.
修改：
resolve: {
extensions: ['', '.js', '.jsx']
},
//删除：'',改为：
resolve: {
extensions: ['.js', '.jsx']
},
（3）
ERROR in Entry module not found: Error: Can't resolve 'babel' in 'D:\webStorm\Th
inkJS\think-web2'
错误原因：webpack 版本问题？好像是依赖的babel 包没有安装全
修改：
添加依赖的包：
"babel-preset-es2015":"^6.9.0",
"babel-preset-es2015-loose": "6.x.x",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-0": "^6.5.0",
"babel-eslint": "^4.1.8",
"babel-loader": "^6.2.4",
（4）错误：
ERROR in Entry module not found: Error: Can't resolve 'babel' in 'D:\webStorm\Th
inkJS\think-web2'
BREAKING CHANGE: It's no longer allowed to omit the '-loader' suffix when using
loaders.
You need to specify 'babel-loader' instead of 'babel',
see https://webpack.js.org/guides/migrating/#automatic-loader-m
odule-name-extension-removed
修改：
loader: 'babel',
//修改为：
loader:'babel-loader'
错误修改完成，修改后的webpack.config.js 文件为
var path = require('path');
var webpack = require('webpack');
module.exports = {
// entry 入口文件
entry: './www/static/src/App.jsx',
// output 编译后的js输出目录及名称
output: {
path: path.join(__dirname, '/www/static/js/'),
filename: 'bundle.js'
},
plugins: [],
//resolve 指定可以被 import 的文件后缀。
//比如 Hello.jsx 这样的文件就可以直接用 import Hello from 'Hello' 引用。
resolve: {
extensions: ['.js', '.jsx']
},
module: {
//loaders 指定 babel编译后缀名为 .js 或者 .jsx 的文件，
//这样你就可以在这两种类型的文件中自由使用 JSX 和 ES6 了。
loaders: [{
test: /\.jsx?$/,
loader: 'babel-loader',
// cacheDirectory: false,
// query 指定babel的一些插件等
query: {
presets: ['react', 'es2015-loose', 'stage-0'],
plugins: ['transform-runtime']
},
exclude: /node_modules/
}, ]
}
}
package.json 文件内容：（主要是 "devDependencies": 部分）
{
"name": "thinkjs-application",
"description": "application created by thinkjs",
"version": "1.0.0",
"scripts": {
"start": "node www/development.js",
"compile": "babel src/ --out-dir app/",
"watch-compile": "node -e \"console.log('<npm run watch-compile> no longer need, use <npm start> command direct.');console.log();\"",
"watch": "npm run watch-compile"
},
"dependencies": {
"thinkjs": "2.2.x",
"babel-runtime": "6.x.x",
"source-map-support": "0.4.0"
},
"devDependencies": {
"antd": "^2.9.1",
"babel-cli": "^6.18.0",
"babel-core": "^6.20.0",
"babel-eslint": "^4.1.8",
"babel-loader": "^6.2.4",
"babel-plugin-transform-runtime": "^6.15.0",
"babel-preset-es2015": "^6.18.0",
"babel-preset-es2015-loose": "6.x.x",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-0": "^6.5.0",
"babel-preset-stage-1": "^6.16.0",
"babel-runtime": "6.x.x",
"react": "^15.5.3",
"react-dom": "^15.5.3",
"webpack": "^2.3.3"
},
"repository": "",
"license": "MIT"
}
运行
webpack
npm start
结果如下：
D:\webStorm\ThinkJS\think-web2>webpack
(node:10124) DeprecationWarning: loaderUtils.parseQuery() received a non-string
value which can be problematic, see https://github.com/webpack/loader-utils/issu
es/56
parseQuery() will be replaced with getOptions() in the next major version of loa
der-utils.
Hash: 6f53fd34f2f5a261d921
Version: webpack 2.3.3
Time: 6431ms
Asset Size Chunks Chunk Names
bundle.js 4.3 MB 0 [emitted] [big] main
[0] ./~/react/react.js 56 bytes {0} [built]
[5] ./~/babel-runtime/helpers/classCallCheck.js 208 bytes {0} [built]
[6] ./~/babel-runtime/helpers/inherits.js 1.11 kB {0} [built]
[7] ./~/babel-runtime/helpers/possibleConstructorReturn.js 542 bytes {0} [bui
lt]
[11] ./~/react-dom/index.js 59 bytes {0} [built]
[33] ./~/babel-runtime/helpers/typeof.js 1.07 kB {0} [built]
[58] ./~/antd/lib/button/index.js 503 bytes {0} [built]
[59] ./~/antd/lib/checkbox/index.js 484 bytes {0} [built]
[67] ./~/react/lib/React.js 3.32 kB {0} [built]
[180] ./~/antd/lib/affix/index.js 10.9 kB {0} [built]
[438] ./~/antd/lib/index.js 10.8 kB {0} [built]
[547] ./www/static/src/App.jsx 1.9 kB {0} [built]
[552] ./~/babel-runtime/core-js/object/create.js 94 bytes {0} [built]
[554] ./~/babel-runtime/core-js/object/set-prototype-of.js 104 bytes {0} [built
]
[869] ./~/react-dom/lib/ReactDOM.js 5.14 kB {0} [built]
+ 942 hidden module
D:\webStorm\ThinkJS\think-web2>npm start
> thinkjs-application@1.0.0 start D:\webStorm\ThinkJS\think-web2
> node www/development.js
[2017-04-11 10:42:32] [THINK] Server running at http://127.0.0.1:8360/
[2017-04-11 10:42:32] [THINK] ThinkJS Version: 2.2.18
[2017-04-11 10:42:32] [THINK] Cluster Status: closed
[2017-04-11 10:42:32] [THINK] WebSocket Status: closed
[2017-04-11 10:42:32] [THINK] File Auto Compile: true
[2017-04-11 10:42:32] [THINK] File Auto Reload: true
[2017-04-11 10:42:32] [THINK] App Enviroment: development
[2017-04-11 10:42:36] [HTTP] GET / 200 141ms
