thinkJS+antd+webpack

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

推荐阅读更多精彩内容