nodejs missing script: dev_NodeJS指令

最新推荐文章于 2023-09-25 15:49:38 发布

weixin_39575212

最新推荐文章于 2023-09-25 15:49:38 发布

阅读量346

点赞数

文章标签： nodejs missing script: dev

一、需要用到的网址：

1. 安装Visual Studio Code: https://code.visualstudio.com/

2. 安装NodeJS: http://nodejs.cn/download/

3. NPM地址：https://www.npmjs.com/

4. Webpack.config.js文件配置网址：https://www.webpackjs.com/configuration/

二、命令与安装

打开CMD：按住shift+鼠标右键 ->在此处打开命令窗口

CMD清空内容 cls
npm –o 可选环境
npm –g 全局环境

1. 安装less:

 npm install -g less

CMD输入：

lessc a.less a.css

2. 安装Webpack

npm install -g webpack
npm install -g webpack-cli

或者写成

npm install -g webpack webpack-cli

确认版本号

webpack -v

3. 创建身份证

npm init

4. 文件结构，创建文件夹以及相关文件

5. 配置webpack.config.js文件（最基本版）

const path = require('path');
module.exports = {
    entry: "./www/app/main.js", //入口文件
    output: {      //出口文件
        path: path.resolve(__dirname, "dist"), //打包到哪个文件夹中
        filename: "bundle.js",   //在打包文件夹中生成新文件
    },
    watch: true,  //检测文件的实时更新，不用每次都webpack
}

使用CMD > webpack生成可以被html引用的新js文件（保持CMD窗口打开，实时更新）

如果dist文件夹下的bundle.js生成了，就成功了。

webpack

6. 安装babel-loader(三装一配）

babel是-g安装的工具，需要用.babelrc文件进行指导（使用webpack平台就不需要rc文件了）
babel用来翻译高级语法

第一步在webpack.config.js中配置babel

const path = require('path');
module.exports = {
    entry: "./www/app/main.js", //入口文件
    output: {      //出口文件
        path: path.resolve(__dirname, "dist"), //打包到哪个文件夹中
        filename: "bundle.js",   //在打包文件夹中生成新文件
    },
    watch: true,  //检测文件的实时更新，不用每次都webpack
    mode: "development", 
    module: {           //添加module配置babel
        rules: [
            {
              test: /.jsx?$/,   //以js结尾的文件
              include: [
                path.resolve(__dirname, "www/app")  //包括什么文件夹
              ],
              exclude: [
                path.resolve(__dirname, "node_modules")  //不包括什么文件夹
              ],
              loader: "babel-loader",
              options: {
                presets: ["env"]
              },
            }
        ]
    }
}

第二步开始安装

babel-core表示babel核心
babel-loader表示babel加载器
babel-preset-env表示babel的预处理器，让babel对ecmascript new version进行翻译
之前我们写.babelrc文件，现在webpack在webpack.config.js文件中提供了babel配置的位置

注：babel安装很容易出错，注意CMD安装的反馈说明，以及babel的版本号

npm install --save-dev babel-core 
npm install --save-dev babel-loader
npm install --save-dev babel-preset-env
npm i babel-core babel-loader@7

第三步其他(安装两个插件，可选）--这块调试出错

为了让babel能够翻译“..."符号，需要安装插件@babel/plugin-proposal-object-rest-spread

npm install --save-dev @babel/plugin-proposal-object-rest-spread

为了让babel能够翻译async/awati、*/yield还要安装插件@babel/plugin-transform-runtime

npm install --save-dev @babel/plugin-transform-runtime

更新webpack.config.js如下，增加plugins行

const path = require('path');
module.exports = {
    entry: "./www/app/main.js", //入口文件
    output: {      //出口文件
        path: path.resolve(__dirname, "www/dist"), //打包到哪个文件夹中
        filename: "bundle.js",   //在打包文件夹中生成新文件
        publicPath: "/xuni",        //创建虚拟服务器
    },
    watch: true,  //检测文件的实时更新，不用每次都webpack
    mode: "development", 
    module: {           //添加module配置babel
        rules: [
            {
              test: /.jsx?$/,   //以js结尾的文件
              include: [
                path.resolve(__dirname, "www/app")  //包括什么文件夹
              ],
              exclude: [
                path.resolve(__dirname, "node_modules")  //不包括什么文件夹
              ],
              loader: "babel-loader",
              options: {
              presets: ["env", "react"],
              plugins: ["proposal-object-rest-spread", "transform-runtime"]
              },
            }
        ]
    }
}

7. 安装webpack-dev-server

由于webpack实时监听刷新，容易损坏硬盘，所以装一个虚拟服务器
webpack-dev-server创建一个虚拟服务器，提供一个虚拟打包环境，这样运行速度会快

安装webpack-dev-server

npm install -g webpack-dev-server

查询webpack-dev-server版本号

webpack-dev-server --version

8. 虚拟服务器

创建虚拟服务器

创建www文件夹，将app文件夹，以及index.html文件放入
配置虚拟服务器的webpack.config.js文件，改变文件路径到www文件夹下
最重要的是要添加publicPath: "/xuni", 用来创建虚拟服务器（如果删除可以CMD>webpack直接打包，但是伤硬盘）

const path = require('path');
module.exports = {
    entry: "./www/app/main.js", //入口文件
    output: {      //出口文件
        path: path.resolve(__dirname, "www/dist"), //打包到哪个文件夹中
        filename: "bundle.js",   //在打包文件夹中生成新文件
        publicPath: "/xuni",        //创建虚拟服务器
    },
    watch: true,  //检测文件的实时更新，不用每次都webpack
    mode: "development", 
    module: {           //添加module配置babel
        rules: [
            {
              test: /.jsx?$/,   //以js结尾的文件
              include: [
                path.resolve(__dirname, "www/app")  //包括什么文件夹
              ],
              exclude: [
                path.resolve(__dirname, "node_modules")  //不包括什么文件夹
              ],
              loader: "babel-loader",
              options: {
                presets: ["env"]
              },
            }
        ]
    }
}

改变index.html中js的引用路径到xuni/bundle.js
打开CMD启动虚拟服务器

webpack-dev-server --content-base ./www --port 8080

打开本地虚拟网站：http://127.0.0.1:8080/ （如果打开错误可能是因为IIS没有打开，需要去控制面板 > 程序和功能中打开）
身份证文件package.json配置，更改script参数为

 "scripts": {
    "dev": "webpack-dev-server --content-base ./www --port 8080"
  },

之后启动项目可以直接在CMD中npm run dev, 不用再打webpack-dev-server --content-base ./www --port 8080

npm run dev

9. 安装React

React需要建立在webpack + babel-loader的安装基础上
然后补充安装以下：

babel-preset-react主要用来翻译jsx语法

npm install --save react
npm install --save react-dom
npm install --save-dev babel-preset-react

更新webpack.config.js文件，添加preset: react

const path = require('path');
module.exports = {
    entry: "./www/app/main.js", //入口文件
    output: {      //出口文件
        path: path.resolve(__dirname, "www/dist"), //打包到哪个文件夹中
        filename: "bundle.js",   //在打包文件夹中生成新文件
        publicPath: "/xuni",        //创建虚拟服务器
    },
    watch: true,  //检测文件的实时更新，不用每次都webpack
    mode: "development", 
    module: {           //添加module配置babel
        rules: [
            {
              test: /.jsx?$/,   //以js结尾的文件
              include: [
                path.resolve(__dirname, "www/app")  //包括什么文件夹
              ],
              exclude: [
                path.resolve(__dirname, "node_modules")  //不包括什么文件夹
              ],
              loader: "babel-loader",
              options: {
              presets: ["env", "react"]
              },
            }
        ]
    }
}

可以用一下两个文件进行调试

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
    <script src="xuni/bundle.js"></script>
</body>
</html>

main.js

import React from "react";
import ReactDom from "react-dom";
ReactDom.render(
    <div>hello</div>
    ,
    document.getElementById("app")
)

const[a,b,c]=[1, 2,3];
alert(a);

输出结果

10. 安装Dva， dva中有redux、react-redux、react-router-redux

npm install --save dva

11. 安装其他

npm install --save classnames ramda

12. 配置NodeJS+express的路由（后台）

npm 安装express

npm install --save-dev express

创建app.js文件

var express=require("express");
var app=express();

//静态化www文件夹
app.use(express.static("www"));

//监听端口
app.listen(3000, (err)=>{
    console.log("run at 3000 port");
    
});

在CMD输入

node app.js

输出结果

项目就可以在http://127.0.0.1:3000/#/ 启动

13. 安装lodash

CMD输入

npm install --save-dev lodash

三、fs的API

readFileSync：读取某一个文件的内容
appendFileSync：追加写入某一个文件
readdirSync：读取某一个文件夹的文件名数组

四、开启mongo数据库

Windows+R键打开CMD窗口，输入命令

mongod --dbpath c:database

安装mongo数据库

软件下载：https://www.mongodb.com/download-center/community

Windows下安装必须管理员权限的解决办法：

https://jingyan.baidu.com/article/6f2f55a15bf1d3b5b93e6c03.html

;c:mongodbbin;

weixin_39575212

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
nodejs missing script: dev_NodeJS指令

一、需要用到的网址：1. 安装Visual Studio Code: https://code.visualstudio.com/2. 安装NodeJS: http://nodejs.cn/download/3. NPM地址：https://www.npmjs.com/4. Webpack.config.js文件配置网址：https://www.webpackjs.com/configuratio...
复制链接

扫一扫