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
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 無意中看到zhangwnag大佬分享的webpack教程感覺受益匪淺，特此分享以備自己日后查看，也希望更多的人看到...
    小小字符閱讀 8,227評論 7贊 35
  • 記得2004年的時候，互聯網開發就是做網頁，那時也沒有前端和后端的區分，有時一個網站就是一些純靜態的html，通過...
    陽陽陽一堆陽閱讀 3,336評論 0贊 5
  • 目錄第1章 webpack簡介 11.1 webpack是什么？ 11.2 官網地址 21.3 為什么使用 web...
    lemonzoey閱讀 1,757評論 0贊 1
  • 版權聲明：本文為博主原創文章，未經博主允許不得轉載。 webpack介紹和使用 一、webpack介紹 1、由來 ...
    it筱竹閱讀 11,233評論 0贊 21
  • 享譽全球的奧地利小說家斯蒂芬·茨威格借用一個海盜的故事講出了一段振聾發聵的話：一個人命中最大的幸運，莫過于在他的人...
    河西布衣閱讀 672評論 0贊 5