この記事は、「新人クリエーションセレモニー」イベントに参加し、一緒にゴールドクリエーションの道を歩み始めました。
序文
モジュールを作成するときにes6コードを使用することを好む人もいますが、独自の依存関係パッケージを作成する場合は、他の人の使用を検討する必要があります。es6モジュールを使用することを好む人もいれば、commonjsのインポートが必要な人もいます。 。
モジュールをes6importでインポートでき、commonjsモジュールのrequire importとも互換性があることを願っています。独自のnpmパッケージをアップロードするときは、この問題を考慮する必要があります。
この記事では、es6モジュールの使用を有効にする方法と、互換性のためにes6モジュールを変換するためにbabelを使用する方法について説明します。
ES6モジュール
プロジェクトを作成する
babelなどの新しいフォルダを作成します。
プロジェクトフォルダの場所にcdしてnpm init -y、フロントエンドプロジェクトを作成すると、package.jsonファイルが生成されます。
npm init -y
复制代码ES6モジュールを有効にする
package.jsonに追加すると、"type":"module"プロジェクトのes6モジュールを開くことができ、プロジェクトのjsモジュールでes6のインポートを使用できます。
テスト
プロジェクトの下にsrcフォルダーを作成しindex.js、es6モジュールを使用して作成、エクスポートし、test.jsinを使用してインポートします。
// src/index.js
const add = (a, b) => {
return a + b
}
//请使用非默认导出，因为默认导出转为es5兼容上传npm后
//默认导出会等于使用非默认导出导出一个default属性，那你还不如自己声明是啥属性。
export {add}
复制代码// src/test.js
import {add} from './index.js'
console.log(add(1, 2)) // 3
复制代码互換性の処理
まず、es6インポートはcommonjsインポートと下位互換性がありますが、commonjsはes6をサポートしていません。つまり、独自のnpmパッケージをアップロードするときに、es6プロジェクトをes5（別名commonjs）に変換する必要があります。モジュール）プロジェクト。
バベル
Babel開発の依存関係を追加します。
npm i @babel/core @babel/cli @babel/preset-env -D
复制代码プロジェクトのルートディレクトリに構成ファイルを書き込みますbabel.config.json。
{
"presets": [
[
"@babel/preset-env",
{
"targets": {
"edge": "17",
"firefox": "60",
"chrome": "67",
"safari": "11.1"
},
"useBuiltIns": "usage",
"corejs": "3.6.5"
}
]
]
}
复制代码srcの下で削除しtest.js、packagingコマンドを実行します。次のコマンドは、src以下のすべてのファイルをes5コードに変換します。パッケージの場所については、パッケージをカスタマイズできます。次のコードは、libフォルダーにパッケージ化されます。
npx babel src --out-dir lib
复制代码转化后的代码就可以打包上传至npm了，我们根据npm使用攻略上传。
注意，转化后的包可能会缺失一些新的需要的依赖，要记得在上传npm包前添加需要的新依赖。
上传之前
- 先在
package.json中把name改一个不会重复的名字。 - 并把入口改成我们的
lib/index.js。 - 最后把
"type":"module"去掉。
然后npm导入自己命名的包
npm i babel-test-xxx
复制代码使用es6模块开发项目的人，可以在新的项目里package.json中添加"type":"module"来使用它。
import {add} from 'babel-test-xxx'
console.log(add(1, 2)) // 3
复制代码使用commonjs模块开发项目的人，可以直接require导入使用
const {add} = require('babel-test-xxx')
console.log(add(1, 2)) // 3
复制代码尾言
如果觉得文章还不错的话，欢迎点赞收藏哦，有什么错误或者意见建议也可以留言，感谢~