我试图将反应库发布到npm,但是在我的本地npm版本中,由于scss文件而出现错误。我使用babel转换为es5,但最终文件仍然需要scss文件。
一个例子是我的原始console.js
文件具有以下导入:
import './console.scss'
导致错误的我已编译的console.js
文件包含以下内容:
require('./console.scss')
我收到错误:Error: Cannot find module './console.scss'
我通过创建本地npm包来测试它。我的流程是:
npm run build
npm run build:babel
npm pack
然后我将软件包安装在另一个项目中进行测试,我收到了错误。
这是我的package.json:
{
"name": "",
"version": "1.0.0",
"description": "",
"main": "dist/index.js",
"scripts": {
"start": "nodemon server.js",
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"build-watch": "webpack -w",
"build-babel": "babel src --presets babel-preset-es2015 --out-dir dist"
},
"author": "",
"license": "ISC",
"babel": {
"presets": [
"es2015",
"react"
]
},
"dependencies": {
"react": "^15.5.4",
"react-dom": "^15.5.4"
},
"devDependencies": {
"babel": "^6.23.0",
"babel-cli": "^6.24.1",
"babel-core": "^6.24.1",
"babel-loader": "^6.4.1",
"babel-plugin-css-modules-transform": "^1.2.7",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"css-loader": "^0.28.0",
"express": "^4.15.2",
"html-loader": "^0.4.5",
"node-sass": "^4.5.2",
"node-sass-loader": "^0.1.7",
"nodemon": "^1.11.0",
"path": "^0.12.7",
"sass-loader": "^6.0.3",
"style-loader": "^0.16.1",
"webpack": "^2.3.3"
}
}
这是我的webpack配置:
'use strict';
const webpack = require('webpack')
const path = require('path')
module.exports = {
entry: "./src/indexLocal.js",
output: {
path: path.join(__dirname, 'src'),
filename: 'bundle.js',
},
module: {
loaders: [
{
test: /.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015'],
},
},
{
test: /\.scss$/,
loaders: ['style-loader', 'css-loader', 'sass-loader'],
}
,{
test: /.html$/,
loader: 'html-loader',
query: {
minimize: true
}
}
]
}
};
如何确保我的npm包中包含原始样式而不会因导入scss文件而导致错误? 干杯
答案 0 :(得分:0)
当您运行build-babel
脚本时,它会使用已转译的代码创建dist
文件夹,但是它不会移动sass文件,因此您需要另一个npm脚本将sass文件移动到{{1} }文件夹。
答案 1 :(得分:0)
我也遇到了同样的问题,但是我正在开发一个高度可配置的monorepo代码库。 您可以按照@Nomz在其回答中所说的做,也可以使用此软件包https://www.npmjs.com/package/babel-plugin-sass-export
如果您下载该软件包,请确保将插件添加到babel配置中,他们没有在安装部分中提及(也许太明显了?)
此软件包将为您处理scss文件,但请务必阅读其NPM页面上的警告/问题,不应将其用于生产。
在我的情况下,我将使用Webpack将事物捆绑在一起,或者使用Gulp找出解决方案来进行捆绑。