npm建立專案

ggtc發表於2024-05-04
NPM

建立專案

  • 建立專案目錄
    首先新建一個資料夾，這裡存放著我們的專案。
    image

  • 建立專案檔案
    這裡不使用任何專案模板，相當於使用空模板。
    進入這個資料夾，再cmd中執行npm init。
    然後按照提示輸入package name,專案名等等。每輸入一個就回車。完成之後目錄下會出現一個package.json專案檔案。
    我們到vscode中開啟這個目錄
    image

  • 建立專案入口檔案
    按照package.json的提示，我們需要建立index.js。一般都是放在src資料夾下。於是我們建立這個路徑。
    image
    如果是需要在瀏覽器中執行專案，可以再建立一個index.html，並新增入口js引用
    image

  • 新增依賴引用
    假如我們的需求是要用jquery操作dom
    新增依賴的方式是命令列中執行npm i jquery。這會將包的引用新增到專案檔案

{
  "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檔案
export default{
    repeat:function(str){
        return `${str},${str}`
    }
}

再使用這個模組

import rmodule from "./repeat"
$("body").append($(`<h1 style="color:lightgreen">${rmodule.repeat("Hello jquery")}</h1>`))
  • 使用新增的包
    在index.js中使用import匯入包，然後使用jquery
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編譯器到開發時依賴中。
{
  "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 };

image

  • 編譯專案
    在專案檔案中新增此命令"scripts": {"build": "babel src --out-dir lib"}
{
  "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目錄。
image

  • 評價
    就編譯結果看。babel掃描了src目錄下的所有js檔案，但只進行了原始碼編譯，和原始碼的連結。也就說只做了編譯器的功能，沒有做依賴包的連結的工作。真是服了!

2.使用webpack

為了解決這個問題，我們換成webpack
執行命令npm install -D webpack webpack-cli新增開發時依賴。同時新增pack命令

{
  "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配置檔案
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也被連線到了最終的檔案中。
    image

執行專案

將index.html的js連結換一下

<!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伺服器
image

相關文章