webstorm 相關nodejs設置

本文轉載自查看原文 2017-06-20 18:12 6556 nodejs/ webstorm技巧

1.設置nodejs 【Setting】-【Default Settings】直接添加node.exe

Coding Assistance -【enabled】

2.webstorm 安裝webpack

首先要保證安裝nodejs

alt+f12調出控制台

在項目目錄安裝 webpack和webpack-dev-server（全局安裝）

D:\xiangcloud\webpack\xxxcms>npm -i webpack webpack-dev-server -g

安裝相關依賴

1) D:\xiangcloud\webpack\xxxcms>npm install webpack -g

D:\xiangcloud\webpack\xxxcms>npm install --save-dev webpack

D:\xiangcloud\webpack\xxxcms>npm install --save-dev css-loader

D:\xiangcloud\webpack\xxxcms>npm install --save-dev style-loader

D:\xiangcloud\webpack\xxxcms>npm install --save-dev json-loader

6) 這里要全局安裝webpack-dev-server -g

D:\xiangcloud\webpack\xxxcms>npm install --save-dev webpack-dev-server -g

D:\xiangcloud\webpack\xxxcms>npm install --save-dev html-loader

8）

D:\xiangcloud\webpack\xxxcms>npm install --save-dev file-loader

安裝完成后，項目目錄里生成node_modules文件夾

初始化項目

D:\xiangcloud\webpack\xxxcms>npm init

完成后項目里生成package.json

以下是實例輸出

新建一個index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>測試提交</h1>
</body>
</html>

新建js文件命名webpack.config.js

entry 定義入口文件

output 輸出文件

module.exports={
    entry:'./index.js',
    output:{
        filename:'bundle.js'//打包輸出的文件是bundle.js
    }
}

新建index.js

document.addEventListener('DOMContentLoaded',function () {
    console.log('hi')
})

這時候修改index.html 添加　

就是打包生成的JS

控制台里輸入webpack生成

然后在輸入webpack-dev-server

如果出現

D:\xiangcloud\webpack\xxxcms>webpack-dev-server
'webpack-dev-server' 不是內部或外部命令，也不是可運行的程序
或批處理文件。

解決辦法：

1)項目package.json里 scripts 添加server

寫入

"server":"webpack-dev-server"

控制台輸入npm run server

2) 從新全局安裝webpack-dev-server

D:\xiangcloud\webpack\xxxcms>npm install --save-dev webpack-dev-server -g

瀏覽器輸入http://localhost:8080/

實時修改更新到瀏覽器功能並沒有顯示，谷歌瀏覽器測試截圖

結構

雙擊index.html 點擊谷歌瀏覽器瀏覽

測試結果成功

git提交的時候請先本地安裝git.exe

文檔

github-webpack-dev-server

devServer參數文檔

參考資料：

使用webstorm+webpack構建簡單入門級“HelloWorld”的應用&&構建使用jquery來實現

關於Webstorm webpack經常不能自動熱更新問題

webpack-dev-server不是內部或外部命令

webstorm+webpack創建項目

http://webpack.github.io/docs/webpack-dev-server.html

Webpack多入口文件、熱更新等體驗

webpack熱模塊替換（HMR）/熱更新

webpack熱更新配置小結

其他參考

使用WebStorm創建/運行/調試React Native項目

關於 webpack-dev-server 中 html 文件的自動刷新

gulp設置-開發環境到線上環境上傳布置

webstorm里安裝gulp alt+f12調出控制台全局安裝

D:\xiangcloud\webpack\xxxcms>npm install -g gulp

作為項目的開發依賴（devDependencies）安裝：

D:\xiangcloud\webpack\xxxcms>npm install --save-dev gulp

文件上傳開發環境到線上環境文件部署

安裝 gulp-ftp插件

D:\xiangcloud\webpack\xxxcms>npm install --save-dev gulp-ftp

gulp-ftp使用方法 插件的使用方法直接在http://gulpjs.com/plugins/ 搜索點擊對應名字鏈接

項目里建立gulpfile.js文件寫入代碼

下面是代碼

var gulp = require('gulp');
var gutil = require('gulp-util');
var ftp =require('gulp-ftp');
gulp.task('default',function () {
    // 默認任務
    return gulp.src('*')
        .pipe(ftp({
            host:'ip或者域名',
            user:'用戶名',
            pass:'密碼',
            port:'21',//端口號
            remotePath:'' //上傳到遠程服務器目錄路徑
        }))
        .pipe(gutil.noop())
})

　控制台里執行gulp 默認任務直接執行，如果是有任務名執行gulp 任務名