1.安裝nodejs:打開nodejs官網 https://nodejs.org/en/,點選碩大的綠色Download按鈕,它會根據系統資訊選擇對應版本(.msi檔案)。
打開指令提示符執行下列指令(打開方式:window + r 輸入cmd回車)
node -v檢視安裝的nodejs版本
npm -v檢視npm的版本号
cd定位到目錄,用法:cd + 路徑
dir列出檔案清單;
cls清空指令提示符視窗内容
a.使用npm安裝插件:指令提示符執行npm install <name> [-g] [--save-dev];
1) <name>:node插件名稱。例:npm install gulp-less --save-dev
2) -g:全局安裝。将會安裝在C:\Users\Administrator\AppData\Roaming\npm,并且寫入系統環境變量;
非全局安裝:将會安裝在目前定位目錄;
全局安裝可以通過指令行在任何地方調用它,本地安裝将安裝在定位目錄的node_modules檔案夾下,通過require()調用;
3) --save:将儲存配置資訊至package.json(package.json是nodejs項目配置檔案);
4) -dev:儲存至package.json的devDependencies節點,不指定-dev将儲存至dependencies節點;
一般儲存在dependencies的像這些express/ejs/body-parser等等。
5) 為什麼要儲存至package.json?因為node插件包相對來說非常龐大,是以不加入版本管理,将配置資訊寫入package.json并
将其加入版本管理,其他開發者對應下載下傳即可(指令提示符執行npm install,則會根據package.json下載下傳所有需要的包,
npm install --production隻下載下傳dependencies節點的包)。
b. 使用npm解除安裝插件:npm uninstall <name> [-g] [--save-dev] PS:不要直接删除本地插件包
1) 删除全部插件:npm uninstall gulp-less gulp-uglify gulp-concat ……???太麻煩
2) 借助rimraf:npm install rimraf -g 用法:rimraf node_modules
c. 使用npm更新插件:npm update <name> [-g] [--save-dev]
1) 更新全部插件:npm update [--save-dev]
d. 檢視npm幫助:npm help
e.目前目錄已安裝插件:npm list
2.安裝webpack到全局 npm install webpack -g
3.安裝webpack到你的項目中(要切盤到你的目錄下) npm install webpack --save-dev
4.安裝babel:
npm install babel-core --save-dev
npm install babel-loader --save-dev
npm install babel-preset-es2015 --save-dev
npm install babel-plugin-transform-runtime
5.直接了當,上幹貨。先看一下目錄結構
6.建立webpack.config.js檔案
module.exports={
entry:__dirname + '/src/index.js',
output:{
path: __dirname + '/build',
filename:'[name].bundle.js'
},
module:{
loaders:[
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader",
query:
{
presets: ['es2015'],
plugins: ['transform-runtime']
}
}
]
}
}
7.index.js檔案,使用了es6的import功能,導入子產品,實作子產品化
import animal, { say, type as animalType } from './content'
let says = say()
var message = `The ${animalType} says ${says} to ${animal}`
console.log(message)
$('#result').html(message)
8.content.js檔案,export指令除了輸出變量,還可以輸出函數,甚至是類(react的子產品基本都是輸出類)
export default 'A cat'
export function say() {
return 'Hello'
}
export const type = 'dog'
9.package.json
{
"name": "es6_webpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "xutongbao",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-es2015": "^6.24.1",
"webpack": "^3.5.6"
},
"dependencies": {
"babel-plugin-transform-runtime": "^6.23.0"
}
}
10.index.html
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
</head>
<body>
<div id="result"></div>
<script src="build/main.bundle.js" ></script>
</body>
</html>
11.main.bundle.js,webpack打包後的檔案
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId]) {
/******/ return installedModules[moduleId].exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, {
/******/ configurable: false,
/******/ enumerable: true,
/******/ get: getter
/******/ });
/******/ }
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
var _content = __webpack_require__(1);
var _content2 = _interopRequireDefault(_content);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var says = (0, _content.say)();
var message = 'The ' + _content.type + ' says ' + says + ' to ' + _content2.default;
console.log(message);
$('#result').html(message);
/***/ }),
/* 1 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.say = say;
exports.default = 'A cat';
function say() {
return 'Hello';
}
var type = exports.type = 'dog';
/***/ })
/******/ ]);
11.運作結果