创建项目

  • 创建项目目录

    首先新建一个文件夹，这里存放着我们的项目。

  • 创建项目文件

    这里不使用任何项目模板，相当于使用空模板。

    进入这个文件夹，再cmd中运行npm init。

    然后按照提示输入package name,项目名等等。每输入一个就回车。完成之后目录下会出现一个package.json项目文件。

    我们到vscode中打开这个目录

  • 创建项目入口文件

    按照package.json的提示，我们需要创建index.js。一般都是放在src文件夹下。于是我们创建这个路径。



    如果是需要在浏览器中运行项目，可以再创建一个index.html，并添加入口js引用

  • 添加依赖引用

    假如我们的需求是要用jquery操作dom

    添加依赖的方式是命令行中执行npm i jquery。这会将包的引用添加到项目文件

    package.json

{

  "name": "npm-project",

  "version": "1.0.0",

  "description": "",

  "main": "index.js",

  "scripts": {

    "test": "echo \"Error: no test specified\" && exit 1"

  },

  "author": "",

  "license": "ISC",

  "dependencies": {

    "jquery": "^3.7.1"

  }

}
  • 使用自定义模块

    添加repeat.js文件

    repeat.js
export default{

    repeat:function(str){

        return `${str},${str}`

    }

}

再使用这个模块

index.js

import rmodule from "./repeat"

$("body").append($(`<h1 style="color:lightgreen">${rmodule.repeat("Hello jquery")}</h1>`))
  • 使用添加的包

    在index.js中使用import导入包，然后使用jquery

    index.js
import rmodule from "./repeat"

import $ from "jquery"

$("body").append($(`<h1 style="color:lightgreen">${(()=>"Hello jquery")()}</h1>`))

$("body").append($(`<h1 style="color:lightgreen">${rmodule.repeat("Hello jquery")}</h1>`))

由于import $ from "jquery"中"jquery"不是真实路径，所以还需要编译项目。

编译项目

1.babel编译器

  • 添加编译器

    在命令行中运行npm install -D @babel/core @babel/cli @babel/preset-env，这将会添加一个叫babel的es6编译器到开发时依赖中。

    package.json
{

  "name": "npm-project",

  "version": "1.0.0",

  "description": "",

  "main": "index.js",

  "scripts": {

    "test": "echo \"Error: no test specified\" && exit 1"

  },

  "author": "",

  "license": "ISC",

  "devDependencies": {

    "@babel/cli": "^7.24.5",

    "@babel/core": "^7.24.5",

    "@babel/preset-env": "^7.24.5"

  },

  "dependencies": {

    "jquery": "^3.7.1"

  }

}
  • 添加编译器的配置文件

    在项目的根目录下创建一个命名为 babel.config.js 的配置文件
const presets = [

  [

    "@babel/preset-env",

    {

      targets: {

        edge: "17",

        firefox: "60",

        chrome: "67",

        safari: "11.1",

      },

      useBuiltIns: "usage",

      corejs: "3.6.4",

    },

  ],

];

module.exports = { presets };

  • 编译项目

    在项目文件中添加此命令"scripts": {"build": "babel src --out-dir lib"}

    package.json
{

  "name": "npm-project",

  "version": "1.0.0",

  "description": "",

  "main": "index.js",

  "scripts": {

    "test": "echo \"Error: no test specified\" && exit 1",

    "build": "babel src --out-dir lib"

  },

  "author": "",

  "license": "ISC",

  "devDependencies": {

    "@babel/cli": "^7.24.5",

    "@babel/core": "^7.24.5",

    "@babel/preset-env": "^7.24.5"

  },

  "dependencies": {

    "jquery": "^3.7.1"

  }

}

然后运行此命令npm run build，使用babel编译器,将src目录中的文件编译为es2015，输出到lib目录。

  • 评价

    就编译结果看。babel扫描了src目录下的所有js文件，但只进行了源代码编译，和源码的链接。也就说只做了编译器的功能，没有做依赖包的链接的工作。真是服了!

2.使用webpack

为了解决这个问题，我们换成webpack

运行命令npm install -D webpack webpack-cli添加开发时依赖。同时添加pack命令

package.json

{

  "name": "npm-project",

  "version": "1.0.0",

  "description": "",

  "main": "index.js",

  "scripts": {

    "test": "echo \"Error: no test specified\" && exit 1",

    "build": "babel src --out-dir lib",

    "pack": "webpack"

  },

  "author": "",

  "license": "ISC",

  "devDependencies": {

    "@babel/cli": "^7.24.5",

    "@babel/core": "^7.24.5",

    "@babel/preset-env": "^7.24.5",

    "webpack": "^5.91.0",

    "webpack-cli": "^5.1.4"

  },

  "dependencies": {

    "jquery": "^3.7.1"

  }

}
  • 添加webpack配置文件

    在根目录下添加webpack.config.js配置文件

    webpack.config.js
const path=require("path");

module.exports={

    mode:"development",

    entry:"./src/index.js",

    output:{

        filename:"dist.js",

        path:path.resolve(__dirname,"dist")

    }

}
  • 编译

    运行命令npm run pack。根目录下出出现打包的文件。jquery也被连接到了最终的文件中。

运行项目

将index.html的js链接换一下

index.html

<!DOCTYPE html>

<html>

    <header>

        <title>入口HTML</title>

    </header>

    <!-- <script type="module" src="./src/index.js"></script> -->

    <script type="module" src="./dist/dist.js"></script>

    <body>

        <h1>

            Hello World

        </h1>

    </body>

</html>

然后用live server扩展在此文件上运行一个web服务器

直接使用html作为webpack入口文件

我不清楚手动改html使用的js路径合不合适。但这显然有些不和谐。

因此还可以使用webpack的html-webpack-plugin自动从入口js生成html。

  • 运行npm i html-webpack-plugin -D安装此插件
  • 使用此插件

    webpack.config.js
const path=require("path");

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports={

    mode:"development",

    entry:"./src/index.js",

    output:{

        filename:"dist.js",

        path:path.resolve(__dirname,"dist")

    },

    plugins:[

        new HtmlWebpackPlugin({

            template:"./index.html"

        })

    ]

}

这里的配置是直接将index.html复制到输出目录下。html引用js里面使用了和webpack.config.js输出相同的路径，免去了手动复制。

  • 不使用template模板，直接生成html
plugins:[

        new HtmlWebpackPlugin({

            title:"html入口"

        })

    ]

这将生成一个新的index.html,然后链接了index.js。这就不让理会html里面的路径问题了。

  • 评价

    这种写法感觉不对。把原来html的简介的声明式语法变成了繁杂的js代码。就像从wpf变回了win32api,这是倒退。

最终的项目结构

npm创建项目的更多相关文章

  1. @vue-cli3创建项目报错：ERROR command failed: npm install --loglevel error --registry=https://registry.npm.taobao.org --di

    使用@vue-cli3时 在你感觉所以配置都搞好开始创建项目时,不停的报错,就是创建不成功 清npm缓存也不行 改淘宝镜像也不行 就快奔溃了,最后最终(其实我在凑150字,为了能发到首页给更多采坑的兄 ...

  2. create-react-app创建项目后运行npm run eject命令报错解决办法

    最近在用create-react-app创建项目,因要配置各种组件,比如babel,antd等, 需要运行npm run eject命令把项目的配置文件暴露出来,但是还是一如既然碰到报错,因为是在本地 ...

  3. vue-cli3.0创建项目报npm install --loglevel error 踩坑的那把辛酸泪

    创建项目 vue create vue-pro 然后如下图 一开始以为是npm的问题,卸载了Mac的node ,安装nvm,然后再安装node (可参考: Mac中nvm的安装和使用   https: ...

  4. npm 创建vue项目（指定目录进行创建）

    1.先安装node,js和npm 检验mpm 和node的方式是 npm -v  / node -v 2.安装最新版本 npm install @vue/cli -g 意外安装老版本的是代码  npm ...

  5. vue-cli 创建项目不成功 原因为项目文件夹无node_modules文件 进行npm install不成功解决办法

    不知道有没有童鞋出现过全局安装vue-cli是成功的,但是创建项目时命令行报了很多错误,如下 本来是需要按照提示依次切换到项目文件夹,再npm run dev 即可完成项目创建并启动的,但是又报了如下 ...

  6. react创建项目后运行npm run eject命令将配置文件暴露出来时报错解决方法

    最近在用create-react-app创建项目,因要配置各种组件,比如babel,antd等, 需要运行npm run eject命令把项目的配置文件暴露出来,但是还是一如既然碰到报错,因为是在本地 ...

  7. npm vue项目的创建

    一.创建项目之前需要先下载一个node.js 官方网址:https://nodejs.org/en/  二.创建 (1)建一个文件夹,进入这个文件夹输入cmd打开小黑窗: Vue.js文档:https ...

  8. (转) 一步一步学习ASP.NET 5 (二）- 通过命令行和sublime创建项目

    转发:微软MVP 卢建晖 的文章,希望对大家有帮助. 注:昨天转发之后很多朋友指出了vNext的命名问题,原文作者已经做出了修改,后面的标题都适用 asp.net 5这个名称. 编者语 : 昨天发了第 ...

  9. JavaScript 项目构建工具 Grunt 实践：安装和创建项目框架

     Grunt 是一个基于任务的 JavaScript 项目命令行构建工具,运行于 Node.js 平台.Grunt 能够从模板快速创建项目,合并.压缩和校验 CSS & JS 文件,运行单元测 ...

  10. WebStorm中Node.js项目配置教程（1）——创建项目

    Node.js绝对是一个web开发的热点话题,作为web神器的WebStorm也是开发Node.js的佼佼者. 接下来就Node.js项目在WebStorm的配置操作就行详细的讲解,首先是创建项目.两 ...

随机推荐

  1. dev DEV控件：gridControl常用属性设置

    引用:https://www.cnblogs.com/kingsliu/articles/6145679.html 1.隐藏最上面的GroupPanelgridView1.OptionsView.Sh ...

  2. 上传文件附件时判断word、excel、txt等是否含有敏感词如身份证号，手机号等

    上传附件判断word.excel.txt等文档中是否含有敏感词如身份证号,手机号等,其它检测如PDF,图片(OCR)等可以自行扩展. 互联网项目中,展示的数据中不能包含个人信息等敏感信息.判断word ...

  3. 医疗BI系统如何使医疗行业完成精细化管理转型？

    不久前在北京召开的全国医疗管理工作会议,确定了今年的医疗管理工作重点.会议强调,推动医疗管理改革工作的过程中要对形势.规律准确把握,积极应对可能面临的挑战,以"三个转变.三个提高" ...

  4. Qt：Qt自适应高分辨率屏幕

    现在的电脑分辨率越来越高,DPI也越来越大,使用Qt创建出来的界面,在小分辨率电脑上显示的很好,但是在大分辨率电脑上显示异常,感觉边框被压缩了,看起来很不协调. 从Qt 5.6 还是从Qt 5.14 ...

  5. springBoot集成RPC

    需求 : 项目开发到尾期,仓库系统需要对接我们这边的制造系统, 为的是制造系统所使用物料时,需向仓库系统发送请求物料信息,所以需要调用 仓库接口. 使用技术: RPC 数据传输格式: json 开发环 ...

  6. 如何在报表中绘制 SVG 统计图

    SVG 作为一种矢量图形,具有任意缩放不失真.可被高质量打印.文件较小.交互性强等优势,正逐渐成为一种主流的图片格式.润乾报表一方面可以生成 SVG 格式的统计图,另一方面也可以在 HTML5 中直接 ...

  7. 《C# in depth》第5章C#5.0中的更改(十二)——指针和非安全编码

    指针类型是一种C# 5.0 中引入的不安全代码特性,它允许程序员直接访问内存地址,以及使用指向变量和对象的指针.指针类型可以帮助程序员处理一些高性能场景,例如在大型数组中查找数据. 指针类型需要使用 ...

  8. easyx的使用 鼠标交互（3.1）

    本文学习于B站,进行借鉴学习记录: 视频链接:鼠标操作(新版)_哔哩哔哩_bilibili 初始化调用文件头不再使用#include<graphics.h>,选择调用#include< ...

  9. 2FA(双因素身份验证)之手机令牌(TOTP)逻辑

    2FA(双因素身份验证)之手机令牌(TOTP)逻辑 纯猜测,没试过,有空试 分为移动端.客户端以及网页端 Steam那种属于APP是网页,客户端是网页,网页端也是网页,挺抽象的 关键点: 时间一致(时 ...

  10. 力扣190(java)-颠倒二进制位（简单）

    题目: 颠倒给定的 32 位无符号整数的二进制位. 提示: 请注意,在某些语言(如 Java)中,没有无符号整数类型.在这种情况下,输入和输出都将被指定为有符号整数类型,并且不应影响您的实现,因为无论 ...