ホームページ > 記事 > ウェブフロントエンド > Parcel.js + Vue 2.x で非常に高速なゼロ構成パッケージングを実現する方法
Parcel.js + Vue 2.x で非常に高速なゼロ構成パッケージングを実現する方法
- 亚连オリジナル
- 2018-06-15 17:30:291618ブラウズ
この記事では主に Parcel.js + Vue 2.x の非常に高速なゼロ構成パッケージング エクスペリエンスの関連情報を紹介します。必要な方は参考にしてください
Browserify と Webpack に続いて、別のパッケージング ツール Parcel が判明しました
Parcel The .js の公式 Web サイトには、「非常に高速な設定ゼロの Web アプリケーション パッケージング ツール」という自己紹介があります
簡単に触ってみたところ、効率の点では確かに webpack よりもはるかに優れていますが、落とし穴もたくさんあるはずです。将来的にはアップグレードされる予定です徐々に人気が出てくるでしょう
公式ドキュメント: https://parceljs.org/getting_started.html
公式 GitHub: https://github.com/parcel-bundler/parcel
1.基本的な使い方
Parcelのインストールにはnpmかyarnを使用します
まずParcel.jsをグローバルにインストールする必要があります。 .0
npm install -g parcel-bundler
それから設定ファイルを書きます...いいえ、これはWebpackではありません、これはパーセル、ゼロ設定パッケージです
プロジェクトディレクトリを直接作成し、それを使用して単純な従来のページを作成します
それからコマンドラインを開きますプロジェクトのルート ディレクトリにあるツールで、次のコマンドを入力します
parcel index.html -p 3030
次に、ブラウザで http を開きます: //localhost:3030/ で、開発したばかりのページが開きます
上記のコマンドでは、-p を使用してポート番号を設定します設定されていない場合、デフォルトでポート 1234 が開始されます
parcel はホット アップデートをサポートし、HTML、CSS、JS の変更とインスタント レンダリングを監視します
// 実際、src を通じて導入された CSS と JS はホット アップデートできません
開発が完了したら、次のコマンドを入力してパッケージ化します
parcel build index.html
パッケージ化後にdistディレクトリが生成されます
Qiaodouの袋、同意しました パッケージングはどうしますか？なぜまだこれほど多くのファイルがあるのでしょうか?
心配しないでください。このページには package.json さえありません。次に、これをモジュール型プロジェクトに変換すると、パッケージ化の効果がわかります。最初に手動で開きます。index.html 効果を見てください...待ってください...CSS が読み込まれていないのはなぜですか?
これは、パッケージ化されたパスがすべて絶対パスであるため、サーバー上に配置しても問題はありません。ローカルで開く必要がある場合は、手動で相対パスに変更する必要があります
2. モジュール形式のアプリケーション。プロジェクト 長編映画 開始するには、まず上記のプロジェクトをモジュラー プロジェクトに変換します
npm init -y コマンドを使用してデフォルトの package.json を作成し、起動コマンドとパッケージ化コマンドを変更します
npm run dev を直接使用できるようにするため、プロジェクトを開始し、 npm run build でパッケージ化されたパッケージを実行します npm init -y 命令创建一个默认的 package.json，并修改启动和打包命令
这样就可以直接通过 npm run dev 启动项目，npm run build 执行打包了
之前是全局安装的 parcel，实战中更推荐在项目中添加依赖
npm install parcel-bundler -S
上面是一个传统页面，使用 link 引入的 css
既然要改造为模块化项目，那就只需要引入一个 main.js，然后在 main.js 中引入其他的 css 和 js 文件
所以需要用到 import 等 ES6 语法，那就安装一个 babel 吧
npm install babel-preset-env -S
然后在根目录创建一个 .babelrc 文件，添加以下配置：
{
"presets": ["env"]
}再安装一个 css 转换工具，比如 autoprefixer
npm install postcss-modules autoprefixer -S
创建 .postcssrc 文件：
{
"modules": true,
"plugins": {
"autoprefixer": {
"grid": true
}
}
}官方文档还推荐了一款编译 html 资源的插件 PostHTML，不过这里暂时不需要
自行改造代码，最后 npm run build
<!-- index.html -->
<body>
<p id="app"></p>
<script src="./src/main.js"></script>
</body>
// main.js
import 'babel-polyfill'
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import './css/common.css'
Vue.config.productionTip = false
const vm = new Vue({
el: '#app',
router,
render: h => h(App)
})上記は従来のページです。リンクで紹介されているCSSを使用してくださいモジュール型プロジェクトに変換したいので、main.jsを導入するだけで済みます。 main.js に他の css および js ファイルを導入します したがって、import などの ES6 構文を使用する必要があります。次に、babel をインストールします
{
"name": "ParcelVue",
"version": "1.0.0",
"description": "The project of parcel & vue created by Wise Wrong",
"main": "main.js",
"scripts": {
"dev": "parcel index.html -p 3030",
"build": "parcel build index.html"
},
"keywords": [
"parcel",
"vue"
],
"author": "wisewrong",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^7.2.3",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.6.1",
"parcel-bundler": "^1.3.0",
"parcel-plugin-vue": "^1.4.0",
"postcss-modules": "^1.1.0",
"vue-loader": "^13.6.1",
"vue-style-loader": "^3.0.3",
"vue-template-compiler": "^2.5.13"
},
"dependencies": {
"vue": "^2.5.13",
"vue-router": "^3.0.1"
}
} 次に、ルート ディレクトリに .babelrc ファイルを作成し、次の設定を追加します。 autoprefixer などの CSS 変換ツールをインストールしますrrreee
.postcssrc ファイルを作成します:rrreee
公式ドキュメントでは、HTML リソースをコンパイルするプラグイン PostHTML を使用することも推奨していますが、最後に、npm run build がパッケージ化され、その内容も autoprefixer でコンパイルされていることがわかります
3. Parcel の使用Vueプロジェクトで
公式ドキュメントにはreactプロジェクトに適した式が記載されています でも私は普段vueを使ってます 長い間調べた結果、やっと見つけた方法です まだ入り口としてindex.htmlを使用していますので、紹介します。 main.js とスクリプト: rrreeeここで、私は非常に強力なプラグイン、parcel-plugin-vue をお勧めしたいと思います。これにより、parcel と vue がうまく連携できるようになります
前に述べた babel に加えて、autoprefixer、最後のpackage.json は次のようになります:rrreee必ずルート ディレクトリに .postcssrc および .babelrc ファイルを作成することを忘れないでください
その後、npm install で依存関係がインストールされ、npm run dev でプロジェクトが開始され、npm run build でプロジェクトのパッケージが作成されます上は私です。皆さんのためにまとめました。今後皆さんのお役に立てれば幸いです。
関連記事:vueパッケージ化後の無効な静的リソース画像の問題を解決する方法
vue-routerとexpressプロジェクトをサーバーにデプロイする方法
Vue 2.5.2でaxios + Expressを使用した404ローカルリクエストの解決策
🎜🎜🎜vueとreactを使用して展開と折りたたみの効果を実現🎜🎜🎜🎜vueでWebpackパッケージの最適化を実装する方法🎜🎜🎜🎜vueコーディングの詳細な説明スタイル🎜🎜以上がParcel.js + Vue 2.x で非常に高速なゼロ構成パッケージングを実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。