點擊右上方紅色按鈕關注“web秀”，讓你真正秀起來

前言

我們開發的之後期望的結果是支持 import、require 或者直接使用>

import $ from "jquery";

完成組件的開發

完成組件開發後

1、修改webpack.config.js 這個文件

// ... 此處省略代碼 
module.exports = {
 entry: './src/main.js',
 output: {
 // 修改打包出口，在最外級目錄打包出一個 index.js 文件，我們 import 默認會指向這個文件
 path: path.resolve(__dirname, './dist'),
 publicPath: '/dist/',
 filename: 'npm-test.js',
 library: 'npm-test', // 指定的就是你使用require時的模塊名
 libraryTarget: 'umd', // libraryTarget會生成不同umd的代碼,可以只是commonjs標準的，也可以是指amd標準的，也可以只是通過script標籤引入的
 umdNamedDefine: true // 會對 UMD 的構建過程中的 AMD 模塊進行命名。否則就使用匿名的 define
 },
 // ... 此處省略代碼 
}

2、修改 package.json 文件

// 發佈開源因此需要將這個字段改為 false
"private": false,
// 這個指 import npm-test 的時候它會去檢索的路徑 

"main": "dist/npm-test.js",

發佈到npm

發佈命令其實就是兩句話 // 這裡需要你有一個 npm 的賬號，文章開頭有官網鏈接

npm login // 登陸 
Username: 
Password: 
Email: (this IS public) 
Logged in as javanx on https://registry.npmjs.org/.

你會說沒有註冊，怎麼登陸，他會檢測你沒有註冊，就會去註冊了。

npm publish // 發佈

完成之後我們就可以在項目中安裝使用了

npm install npm-test -S

項目中用

import CustomUI from 'npm-test'

這樣就完成了整套了循環了。

公告

閱讀更多 web秀 的文章

關鍵字: 組件 打包 文件