1. 程式人生 > >vue+webpack 實現元件按需引入

vue+webpack 實現元件按需引入

1、安裝依賴包

1$ npm install --save-dev babel-preset-es2015

ps:babel-loaderbabel-core應該是預設裝好的,如果沒有安裝,請重新安裝

2、修改【webpack.base.conf.js】配置檔案
找到 /\.js$/的rules,進行修改

12345678910{test: /\.js$/,use: [{loader: 'babel-loader',options: {presets: ['es2015']}}],exclude: /node_modules/}

3、根目錄下【.babelrc】檔案
檔案內容:

123
{
  // 此項指明,轉碼的規則
"presets": [
  //個人認為多此一舉
[
"es2015", {"modules": false }], //需要npm install babel-preset-es2015 -D
// env項是藉助外掛babel-preset-env,下面這個配置說的是babel對es6,es7,es8進行轉碼,並且設定amd,commonjs這樣的模組化檔案,不進行轉碼
// compiles ES2015+ down to ES5 具體見官網:https://www.npmjs.com/package/babel-preset-env
    ["env", { "modules": false }],  
// 下面這個是不同階段出現的es語法,包含不同的轉碼外掛
//可參考babel官網
"stage-2" ], "plugins": [
//// 下面這個選項是引用外掛來處理程式碼的轉換,transform-runtime用來處理全域性函式和優化babel編譯
"transform-runtime", //需要npm install babel-plugin-component -D
//官網:http://element-cn.eleme.io/#/zh-CN/component/quickstart
["component", [{ "libraryName": "element-ui", //按需引用element-ui外掛 //
"styleLibraryName": "theme-default" //按需引用element-ui主題 }]] ],
// 下面指的是在生成的檔案中,不產生註釋
"comments": false,
// 下面這段是在特定的環境中所執行的轉碼規則,當環境變數是下面的test就會覆蓋上面的設定
"env": {
// test 是提前設定的環境變數,如果沒有設定BABEL_ENV則使用NODE_ENV,如果都沒有設定預設就是development
"test": { "presets": ["env", "stage-2"],
// instanbul是一個用來測試轉碼後代碼的工具
"plugins": [ "istanbul" ] } } }

  我自己的

{ "presets": [ ["env", { "modules": false, "targets": { "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] } }], ["es2015", { "modules": false }], "stage-2" ], "plugins": ["transform-vue-jsx", "transform-runtime", [ "component", [ { "libraryName": "element-ui", "styleLibraryName": "theme-chalk" }, { "libraryName": "mint-ui", "style": true } ] ] ]}

檢視

注: Element-ui 引入一個功能時  可能需要按需引入2個元件 自己留意檢視即可

mint ui 註冊元件時 只能用component  例如 Vue.component(Button.name,Button)



執行檢視指令碼檢視效果,指令視情況而定

1$ npm run dev